Tablo Oluşturmak

Arkadaşlar merhaba,

Anlatımı bir Son_Silahsor dostumuz hazırlamıştır ve kendisine çok teşekkür ediyorum.

Bu işlemleri öğrenmeniz için kodları css dosyanıza ekleyin ve denemeler yapın. Hemen anlatıma geçelim.

————–

Basılı kitaplarda bazen listelerle, tablolarla, çizelgelerle karşılaşırız. Bunu epub'a aktarırken genelde sayfa resim dosyası halinde eklenir. Ancak resim halinde eklemek çoğu zaman istenen sonucu vermez; oysa ki tablo değişken yapısıyla epub'a uyumludur ve istenen sonucu verir.

Bu yazıda basit tablo kullanımını anlatacağım.

Tablo oluştururken dikkat edilmesi gereken husus satır ve sütün yapılarıdır. Satır <tr> html etiketi ile, sütun <td> html etiket ile ifade edilir.

Tablo oluşturken,

1. Her tablo için bir <table> etiketi açılır ve tablo bittiğinde bu etiket kapatılır.
2. Tabloda yer alan her bir satır için <tr> etiketleri açılır.
3. O satırda bulunan sütun sayısı kadar <td> etiketi açılır. (<tr> içerisinde)
4. Her satırdaki <td> sayıları aynı olmalıdır.
5. Tablonun içinde yer alan veriler sadece <td> etiketleri arasına yazılmalıdır.
6. Elbette html etiketlerini kapatmayı unutmuyoruz.

Örneğin 2x2 tablo için şu etiketleri kullanırız:

<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

table {border-collapse: collapse; border: 1px solid black; border-spacing: 0; margin: 1.5em auto;}
th, td {border: 1px solid black; text-align: center;}
th {font-weight: bold; padding: 3px 15px 6px;}
td {padding: 3px 15px;}

-----

tablo oluştururken bir satırı başlıklar halinde olarak kullanmak isteyebiliriz. bu halde ilk satırda <tr> etiketi içinde <td> yerine <th> kullanıyoruz:

<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

table {border-collapse: collapse; border: 1px solid black; border-spacing: 0; margin: 1.5em auto;}
th, td {border: 1px solid black; text-align: center;}
th {font-weight: bold; padding: 3px 15px 6px;}
td {padding: 3px 15px;}

1. border-collapse: collapse -> Satır ve hücreler, birbirleriyle bitişik kenarlıkları ortak kullanırlar.
2. border-collapse: separate -> Satır ve hücreler, birbirlerinden ayrı kenarlığa sahiptir.
3. border-spacing özelliği, table ve inline-table elementlerinde yatay ve dikey hücre kenarlık boşluklarının belirlenmesini sağlar. Bu özellik sadece border-collapse özelliğinin değeri "separate" olarak belirtildiği zaman kullanılabilir.
4. başlık kalın yapılmak istenirse <th> değerine css dosyasında "font-weight: bold;" değeri verilir.
5. tablo kenarlarında çizgi istenmiyorsa ilgili etiketlerdeki kenar çizgisi için kullanılan kod silinmelidir. (border: 1px solid black;)


	
	<table>
      <tr>
        <th>Tarih</th>
        <th>Günlük Mesafe</th>
        <th>Toplam Mesafe</th>
      </tr>
      <tr>
        <td>6 Eylül</td>
        <td>45.2</td>
        <td>45.2</td>
      </tr>
      <tr>
        <td>7 Eylül</td>
        <td>43.4</td>
        <td>88.6</td>
      </tr>
      <tr>
        <td>8 Eylül</td>
        <td>42.6</td>
        <td>131.2</td>
      </tr>
      <tr>
        <td>9 Eylül</td>
        <td>45.3</td>
        <td>176.5</td>
      </tr>
      <tr>
        <td>10 Eylül</td>
        <td>44.9</td>
        <td>221.4</td>
      </tr>
      <tr>
        <td>11 Eylül</td>
        <td>46.8</td>
        <td>268.2</td>
      </tr>
      <tr>
        <td>12 Eylül</td>
        <td>46.3</td>
        <td>314.5</td>
      </tr>
      <tr>
        <td>13 Eylül</td>
        <td>47.4</td>
        <td>361.9</td>
      </tr>
      <tr>
        <td>14 Eylül</td>
        <td>51.4</td>
        <td>413.3</td>
      </tr>
      <tr>
        <td>15 Eylül</td>
        <td>52.4</td>
        <td>465.7</td>
      </tr>
      <tr>
        <td>16 Eylül</td>
        <td>57.1</td>
        <td>522.8</td>
      </tr>
      <tr>
        <td>17 Eylül</td>
        <td>59.8</td>
        <td>582.6</td>
      </tr>
    </table>

2 thoughts on “Tablo Oluşturmak

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s