Bu günkü konumuz html dokümanımıza tablo ekleme işlemi yapacağız. Tablo nasıl yapılır ve sütunları, hücreleri birleştirmeyi göreceğiz.

Öncelikle html dokümanınız

<table></table>

etiketi ile belirlenir ve bir tablo

<tr></tr>

etiketi ile satırlara bölünür. Her bir satır

<td></td>

etiketi ile sütunlara ayrılır. Yani tablomuzdaki hücrelerdir. Tabloda yer alan diğer etiket ise

<th></th>

etiketleridir. Bu etiketler tablodaki başlıkları belirler.

<caption>

etiketi manşeti,

<colgroup>

hücre gruplarını,

<col>

sütun genişliğini,

 <thead> 

tablo başlığını,

<tbody>

tablo body özelliğini,

<tfoot>

etiketi ise tablonun en alt kısmını belirlemek için kullanılır.

Örnekler;

<!DOCTYPE html>
<html>
<head>
  <title>linkler</title>
  <meta charset="utf-8">
</head>
<body>
<table border="1" bgcolor="ff0000" width="80%">
<caption>başlık</caption>
<thead>zjzdjdzfzkdfhdkzfdhfdzk</thead>
  <tr>
    <td bgcolor="#00ff00">ilk hücremiz </td>
    <td>burası da ilk satırımızın ikinci hücresi</td>
  </tr>
<!--ikinci satır başlıyor -->
  <tr>
    <td bgcolor="#60000ff" width="50%">İkinci satırın ilk sütunu</td>
    <td>İkinci satırın ikinci sütunu</td>
  </tr >
<!--
    colspan ile iki sütunu birleştik. İki satırı birleştirmek için
    rowspan değerini de kullanabilirsiniz.
-->
  <tr>
    <td colspan="2">
      <center>
        İki sütun bir satırdan oluşuyor.
      </center>
    </td>
  </tr>
  <tr>
    <td rowspan="2">Burası iki satırlık bir sütun yer alıyor</td>
    <td>Burası ilk satır.</td>
  </tr>
  <tr>
    <td>Burası da ikinci satır.</td>
  </tr>
</table>
</body>
</html>

Çıktısı

<!DOCTYPE html>
<html>
<head>
  <title>linkler</title>
  <meta charset="utf-8">
</head>
<body>
<table border='10'>
<tr>
<td><th rowspan=2></th>
<th colspan=3>3 sütun var</th></td>
</tr>
<tr>
<td><th>A</th><th>B</th>
<th>C</th></td>
</tr>
<tr>
<th rowspan=2>D</th>
<th><DFN></th><td>0000</td><td>0000</td>
<TD>0000</TD>
</tr>
<tr>
<th><DIR></th><td>0000</td><TD>0000</td>
<td>0000</td>
</tr>
</table>
</body>
</html>

Çıktısı

Written by Sümeyra Akbıyık
hakkımdaki her şeyi bu blogda bulabilirsin. Haydi sende bir göz gezdirmeye ne dersin?

Leave a Comment