Yazar: Merhaba değerli ozdogan.gen.tr takipçileri!
bir önceki yazımda sizlere html form örnekleri sunmuştum. şimdi ise html ile yapılmış tablo örneklerini sunuyorum.
Bu örnekleri kullanarak ve ya bu örnekler üzerinden web sayfanızda tablo eklemek istediğiniz noktalarda tablo eklemenize yardımcı olacak örneklerdir.
Bu yazımda dört adet html tablo örneğini sizler için hazırladım. bu yazımdan bu örnekleri kullanabilirsiniz.
Eğer html ile ilgili bilginiz yok ise mutlaka html makalelerimi okumanızı tavsiye ederim, aksi taktirde bu örnekler sizler için birşey ifade etmeyecektir.
Sözü fazla uzatmadan bu örnekler ile sizleri başbaşa bırakıyorum.
örnek bir:
<!doctype html>
<html>
<head>
<meta charset=”windows-1254″>
<title> html tablo örneği bir </title>
</head>
<body>
<table id=”personel”>
<tr>
<th> sıra </th>
<th> ad </th>
<th> soy ad </th>
<th> yaş </th>
</tr>
<tr>
<td> 1 </td>
<td> sadık </td>
<td> özdoğan </td>
<td> 31 </td>
</tr>
<tr>
<td> 2 </td>
<td> dilek </td>
<td> özdoğan </td>
<td> 27 </td>
</tr>
<tr>
<td> 3 </td>
<td> ahmet </td>
<td> çabıtçı </td>
<td> 27 </td>
</tr>
<tr>
<td> 4 </td>
<td> yunus emre </td>
<td> özdoğan </td>
<td> 2 </td>
</tr>
<tr>
<td> 5 </td>
<td> mehmet </td>
<td> özdoğan </td>
<td> 28 </td>
</tr>
<tr>
<td> 6 </td>
<td> celal </td>
<td> çoban </td>
<td> 29 </td>
</tr>
<tr>
<td> 7 </td>
<td> merve </td>
<td> sav </td>
<td> 26 </td>
</tr>
<tr>
<td> 8 </td>
<td> çağrı </td>
<td> ışık </td>
<td> 30 </td>
</tr>
<tr>
<td> 9 </td>
<td> fatih </td>
<td> candan </td>
<td> 29 </td>
</tr>
<tr>
<td> 10 </td>
<td> şirin </td>
<td> karataş </td>
<td> 35 </td>
</tr>
</table>
</body>
</html>
örnek iki:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title> html tablo örneği iki </title>
</head>
<body>
<table border=”2″>
<tr>
<td colspan=”4″>Alış Veriş Tablosu</td>
</tr>
<tr>
<td> tür </td>
<td> ürün </td>
<td> fiyat </td>
<td> indirim oranı </td>
</tr>
<tr>
<td rowspan=”5″>teknoloji</td>
<td> bilgisayar </td>
<td> 8000 </td>
<td rowspan=”3″>%25</td>
</tr>
<tr>
<td> ceptelefonu </td>
<td> 4500 </td>
</tr>
<tr>
<td> tablet </td>
<td> 1500 </td>
</tr>
<tr>
<td> bluetuth kulaklık </td>
<td> 1000 </td>
<td rowspan=”2″>%35</td>
</tr>
<tr>
<td> kulakiçi kulaklık </td>
<td> 160 </td>
</tr>
<tr>
<td rowspan=”2″>bilgisayar aksesuarları</td>
<td> klavye </td>
<td> 200 </td>
<td rowspan=”2″>%10</td>
</tr>
<tr>
<td> mouce </td>
<td> 180 </td>
</tr>
</table>
</body>
</html>
örnek üç:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Tablo Örnekleri</title>
</head>
<body>
<h1>Tablo Örnekleri</h1>
<table border=”1″>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td align=”center” rowspan=”2″ colspan=”2″ >6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
</table>
</body>
</html>
örnek dört:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Tablo Örnekleri</title>
</head>
<body>
<table border=”2″ width=”200″>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td colspan=”2″ align=”center”>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
örnek beş:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Tablo Örnekleri</title>
</head>
<body>
<table border=”2″ width=”200″>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td colspan=”2″ align=”center”>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td colspan=”3″ align=”center”>13</td>
</tr>
</table>
</body>
</html>
not: border özelliği tablolarda kullanılmamaktadır.
not iki: web sayfalarında aşırı tablo kullanımı kod yazma açısından zahmetli olduğundan genelde div elementi kullanılmaktadır. ancak tablo yapısının kullanılması gereken yerler olabilir bu yüzden html tablo yapısını anlamanız için bu örnekleri sizler için hazırladım.
soru ve sorunlarınızı yorum yaz kısmından bana ulaştırabilirsiniz. iyi bloglamalar herkese
Bir önceki yazımız olan html form örnekleri başlıklı makalemizde html form örnekleri, ozdogan.gen.tr html form örnekleri ve sadık özdoğan html form örnekleri hakkında bilgiler verilmektedir.