HTML table

HTML table

Dalam membuat tabel di HTML tidak hanya menggunakan satu tag HTML saja (tidak seperti membuat link atau menampilkan gambar) akan tetapi membutuhkan beberapa tag HTML penyusun tabel, secara sederhana tabel disusun dengan 3 tag HTML diantaranya table, tr, th, dan td.

Tag HTML penyusun tabel

1. table dedefinisikan sebagai tag pembuka tabel.
2. tr singkatan dari table row didefinisikan sebagai baris. 
3. th singkatan dari table heading didefinisikan sebagai header (kepala) tabel.
4. td singkatan dari table data didefinisikan sebagai sel dari tabel.
5. caption didefinisikan sebagai judul tabel

berikut contoh table sederhana

HTML table

[code hl="1, 4, 7"] <table border="1" style="width:100%">
      <caption>Table 1.1 caption table </caption>
      <tr>
         <th>No</th>
         <th>Tag HTML</th>
         <th>atribut</th>
     </tr> 
     <tr>
         <td>1</td>
         <td>table</td>
         <td>border</td>
     </tr>
     <tr>
         <td>2</td>
         <td>tr</td>
         <td>-</td>
     </tr>
     <tr>
         <td>3</td>
         <td>th</td>
         <td>colspan, rowspan</td>
     </tr>
     <tr>
         <td>4</td>
         <td>td</td>
         <td>colspan, rowspan</td>
     </tr>
 </table>[/code]

Caption table

Tabel 1.1 caption table

No	Tag HTML	atribut
1	table	border
2	tr	-
3	th	colspan, rowspan
4	td	colspan, rowspan

Atribut dalam tabel

1. border digunakan untuk membuat garis tepi pada table
2. colspan digunakan untuk menggabung dua colom atau lebih
3. rowspan digunakan untuk menggabung dua baris atau lebih

Table colspan dan rowspan

[code hl="1, 4, 7"]  <table border="1" style="width:100%">
     <caption>Table 1.2 colspan dan rowspan </caption>
     <tr>
         <th rowspan="2">Table
     </th>
         <th colspan="2">tag penyusun tabel </th>
     </tr>
     <tr>
         <th colspan="2">atribut table</th>
     </tr>
     <tr>
         <th>No</th>
         <th>Tag HTML</th>
         <th>atribut</th>
     </tr> 
     <tr>
         <td>1</td>
         <td>table</td>
         <td>border</td>
     </tr>
     <tr>
         <td>2</td>
         <td>tr</td>
         <td>-</td>
     </tr>
     <tr>
         <td>3</td>
         <td>th</td>
         <td>colspan, rowspan</td>
     </tr>
     <tr>
         <td>4</td>
         <td>td</td>
         <td>colspan, rowspan</td>
     </tr>
  </table>[/code]

  Table colspan dan rowspan

Tabel 1.2 colspan dan rowspan

Table	tag penyusun tabel
	atribut table
No	Tag HTML	atribut
1	table	border
2	tr	-
3	th	colspan, rowspan
4	td	colspan, rowspan