Tag Pada HTML Part 9 : Table Tag

Assalamu'alaikum poinreaders,
Pada kesempatan kali ini kita akan belajar sebuah materi mengenai HTML, yaitu tentang Table tag. Materi kali ini merupakan lanjutan dari materi sebelumnya yaitu tentang List tag. Table adalah sebuah data tabular dalam bentuk grid yang terdiri dari column (kolom), row (baris) dan cell (pertemuan antara kolom dan baris). Untuk lebih jelasnya tentang Table tag, yuk simak ulasan berikut...

1. <table>

Fungsi :

Mendefinisikan sebuah tabel HTML. Tag <table> terdiri dari satu atau lebih tag <tr>, <th>, dan <td>. Sebuah tabel HTML juga dapat mencakup tag <caption>, <col>, <colgroup>, <thead>, <tfoot> dan <tbody>.

Format Penulisan :

<table>...</table>

Atribut :

Atribut	value	Keterangan	Deskripsi
align	left center right	optional	Menentukan kesejajaran (alignment) sebuah tabel sesuai dengan teks sekitarnya. Atribut ini tidak didukung di HTML5
bgcolor	rgb(x,x,x) #xxxxxx colorname	optional	Menentukan warna latar belakang (background) tabel. Atribut ini tidak didukung di HTML5.
border	1 0	optional	Menentukan apakah tabel akan diberi tanda pembatas (border) atau tidak. Atribut ini tidak didukung di HTML5.
cellpadding	pixels	optional	Menentukan ruang (padding) antara dinding cell dan isi cell. Atribut ini tidak didukung di HTML5.
cellspacing	pixels	optional	Menentukan ruang (padding) antara cell yg satu dengan cell lainnya. Atribut ini tidak didukung di HTML5.
frame	void above below hsides lhs rhs vsides box border	optional	Menentukan bagian mana dari luar tabel yang akan diberi tanda pembatas (border). Atribut ini tidak didukung di HTML5.
rules	none groups rows cols all	optional	Menentukan bagian mana dari dalam tabel yang akan diberi tanda pembatas (border). Atribut ini tidak didukung di HTML5.
sortable	sortable	optional	Menentukan bahwa sebuah tabel haru diurutkan.
summary	text	optional	Menentukan rangkuman isi tabel. Atribut ini tidak didukung di HTML5.
width	pixels %	optional	Menentukan lebar tabel. Atribut ini tidak didukung di HTML5.

Contoh Penulisan :

<!DOCTYPE HTML>
<html>
<head>
<title>Tag table</title>
</head>
<body>

<table border="1">
<caption>Table Data Mahasiswa:</caption>
<tr>
    <th>Nama</th>
    <th>Usia</th>
</tr>
<tr>
    <td>Denis Julianto</td>
    <td>21</td>
</tr>
<tr>
    <td>Raizal Dzil Wafa</td>
    <td>21</td>
</tr>
</table>

</body>
</html>

2. <caption>

Fungsi :

Mendefinisikan judul tabel. Tag <caption> dimasukkan setelah tag <table>. Pada setiap tabel hanya boleh memiliki 1 caption saja.

Format Penulisan :

<caption>...</caption>

Atribut :

Atribut	value	Keterangan	Deskripsi
align	left right top bottom	optional	Mendefinisikan kesejajaran (alignment) judul.

Contoh Penulisan :

<!DOCTYPE HTML>
<html>
<head>
<title>Tag caption</title>
</head>
<body>

<table border="1">
<caption>Table Data Mahasiswa:</caption>
<tr>
    <th>Nama</th>
    <th>Usia</th>
</tr>
<tr>
    <td>Denis Julianto</td>
    <td>21</td>
</tr>
<tr>
    <td>Raizal Dzil Wafa</td>
    <td>21</td>
</tr>
</table>

</body>
</html>

3. <th>

Fungsi :

Mendefinisikan sebuah sel kepala (cell header) di dalam sebuah tabel HTML. Kata th dalam tag <th> merupakan singkatan dari table head.

Format Penulisan :

<th>...</th>

Atribut :

Atribut	value	Keterangan	Deskripsi
abbr	text	optional	Menentukan versi singkat dari konten dalam sel kepala (header cell). Atribut ini tidak didukung di HTML5.
align	left right center justify char	optional	Menyejajarkan konten dalam header cell. Atribut ini tidak didukung di HTML5.
axis	category_name	optional	Mengkategorikan header cell. Atribut ini tidak didukung di HTML5.
bgcolor	rgb(x,x,x) #xxxxxx colorname	optional	Menentukan warna latar belakang (background) header cell. Atribut ini tidak didukung di HTML5.
char	character	optional	Menyejajarkan konten dalam header cell ke karakter. Atribut ini tidak didukung di HTML5.
charoff	number	optional	Menyetel jumlah karakter pada konten yang akan disejajarkan dari karakter yang ditentukan oleh atribut char. Atribut ini tidak didukung di HTML5.
colspan	number	optional	Menentukan jumlah kolom header cell yang akan digabungkan.
headers	header_id	optional	Menentukan satu atau lebih header cell pada sebuah cell yang berhubungan.
height	pixels %	optional	Mengatur tinggi header cell. Atribut ini tidak didukung di HTML5.
nowrap	nowrap	optional	Menentukan bahwa konten di dalam header cell tidak harus dibungkus (wrap) atau hanya terdiri dari satu baris saja. Atribut ini tidak didukung di HTML5.
rowspan	number	optional	Menentukan jumlah baris header cell yang akan digabungkan.
scope	col colgroup row rowgroup	optional	Menentukan apakah header cell adalah sebuah header untuk sebuah kolom, baris, atau kelompok kolom atau kelompok baris.
sorted	reversed number reversed number number reversed	optional	Menentukan jenis arah sebuah kolom.
valign	top middle bottom baseline	optional	Mensejajarkan konten secara vertikal dalam header cell. Atribut ini tidak didukung di HTML5.
width	pixels %	optional	Menentukan lebar header cell. Atribut ini tidak didukung di HTML5.

Contoh Penulisan :

<!DOCTYPE HTML>
<html>
<head>
<title>Tag table head</title>
</head>
<body>

<table border="1">
<caption>Table Data Mahasiswa:</caption>
<tr>
    <th>Nama</th>
    <th>Usia</th>
</tr>
<tr>
    <td>Denis Julianto</td>
    <td>21</td>
</tr>
<tr>
    <td>Raizal Dzil Wafa</td>
    <td>21</td>
</tr>
</table>

</body>
</html>

4. <tr>

Fungsi :

Mendefinisikan sebuah baris dalam sebuah tabel HTML. Kata tr pada tag <tr> merupakan singkatan dari table row. Sebuah tag <tr> berisi satu atau lebih tag <th> atau <td>.

Format Penulisan :

<tr>...</tr>

Atribut :

Atribut	value	Keterangan	Deskripsi
align	left right center justify char	optional	Menyejajarkan konten dalam baris tabel. Atribut ini tidak didukung di HTML5.
bgcolor	rgb(x,x,x) #xxxxxx colorname	optional	Menentukan warna latar belakang (background) baris tabel. Atribut ini tidak didukung di HTML5.
char	character	optional	Menyejajarkan konten dalam baris tabel ke karakter. Atribut ini tidak didukung di HTML5.
charoff	number	optional	Menyetel jumlah karakter pada konten yang akan disejajarkan dari karakter yang ditentukan oleh atribut char. Atribut ini tidak didukung di HTML5.
valign	top middle bottom baseline	optional	Mensejajarkan konten secara vertikal dalam baris tabel. Atribut ini tidak didukung di HTML5.

Contoh Penulisan :

<!DOCTYPE HTML>
<html>
<head>
<title>Tag table row</title>
</head>
<body>

<table border="1">
<caption>Table Data Mahasiswa:</caption>
<tr>
    <th>Nama</th>
    <th>Usia</th>
</tr>
<tr>
    <td>Denis Julianto</td>
    <td>21</td>
</tr>
<tr>
    <td>Raizal Dzil Wafa</td>
    <td>21</td>
</tr>
</table>

</body>
</html>

5. <td>

Fungsi :

Mendefinisikan sel standar (standard cell) dalam tabel HTML. Kata td pada tag <td> merupakan singkatan dari table data.

Format Penulisan :

<td>...</td>

Atribut :

Atribut	value	Keterangan	Deskripsi
abbr	text	optional	Menentukan versi singkat dari konten dalam sebuah sel (cell). Atribut ini tidak didukung di HTML5.
align	left right center justify char	optional	Menyejajarkan konten dalam sebuah sel. Atribut ini tidak didukung di HTML5.
axis	category_name	optional	Mengkategorikan sel. Atribut ini tidak didukung di HTML5.
bgcolor	rgb(x,x,x) #xxxxxx colorname	optional	Menentukan warna latar belakang (background) sebuah sel. Atribut ini tidak didukung di HTML5.
char	character	optional	Menyejajarkan konten dalam sebuah sel ke karakter. Atribut ini tidak didukung di HTML5.
charoff	number	optional	Menyetel jumlah karakter pada konten yang akan disejajarkan dari karakter yang ditentukan oleh atribut char. Atribut ini tidak didukung di HTML5.
colspan	number	optional	Menentukan jumlah kolom sebuah sel yang akan digabungkan.
headers	header_id	optional	Menentukan satu atau lebih header cell pada sebuah cell yang berhubungan.
height	pixels %	optional	Mengatur tinggi sebuah sel. Atribut ini tidak didukung di HTML5.
nowrap	nowrap	optional	Menentukan bahwa konten di dalam sebuah sel tidak harus dibungkus (wrap) atau hanya terdiri dari satu baris saja. Atribut ini tidak didukung di HTML5.
rowspan	number	optional	Menentukan jumlah baris sebuah sel yang akan digabungkan.
scope	col colgroup row rowgroup	optional	Menentukan apakah header cell adalah sebuah header untuk sebuah kolom, baris, atau kelompok kolom atau kelompok baris.
valign	top middle bottom baseline	optional	Mensejajarkan konten secara vertikal dalam sebuah sel. Atribut ini tidak didukung di HTML5.
width	pixels %	optional	Menentukan lebar sebuah sel. Atribut ini tidak didukung di HTML5.

Contoh Penulisan :

<!DOCTYPE HTML>
<html>
<head>
<title>Tag table data</title>
</head>
<body>

<table border="1">
<caption>Table Data Mahasiswa:</caption>
<tr>
    <th>Nama</th>
    <th>Usia</th>
</tr>
<tr>
    <td>Denis Julianto</td>
    <td>21</td>
</tr>
<tr>
    <td>Raizal Dzil Wafa</td>
    <td>21</td>
</tr>
</table>

</body>
</html>

6. <thead>

Fungsi :

Tag <thead> digunakan untuk mengelompokan isi header dalam sebuah tabel HTML.

Format Penulisan :

<thead>...</thead>

Atribut :

Atribut	value	Keterangan	Deskripsi
align	left right center justify char	optional	Menyejajarkan konten di dalam tag <thead>. Atribut ini tidak didukung di HTML5.
char	character	optional	Menyejajarkan konten di dalam tag <thead> ke karakter. Atribut ini tidak didukung di HTML5.
charoff	number	optional	Menyetel jumlah karakter pada konten di dalam tag <thead> yang akan disejajarkan dari karakter yang ditentukan oleh atribut char. Atribut ini tidak didukung di HTML5.
valign	top middle bottom baseline	optional	Mensejajarkan konten di dalam tag <thead> secara vertikal dalam sebuah sel. Atribut ini tidak didukung di HTML5.

Contoh Penulisan :

<!DOCTYPE HTML>
<html>
<head>
<title>Tag table head</title>
</head>
<body>

<table border="1">
<caption>Table Data Mahasiswa:</caption>
<thead>
    <tr>
      <th>Nama</th>
      <th>Usia</th>
    </tr>
</thead>
<tbody>
    <tr>
      <td>Denis Julianto</td>
      <td>21</td>
    </tr>
    <tr>
      <td>Raizal Dzil Wafa</td>
      <td>21</td>
    </tr>
</tbody>
<tfoot>
    <tr>
      <th>Nama</th>
      <th>Usia</th>
    </tr>
</tfoot>
</table>

</body>
</html>

7. <tbody>

Fungsi :

Tag <tbody> digunakan untuk mengelompokan isi tubuh (body) dalam sebuah tabel HTML.

Format Penulisan :

<tbody>...</tbody>

Atribut :

Atribut	value	Keterangan	Deskripsi
align	left right center justify char	optional	Menyejajarkan konten di dalam tag <tbody>. Atribut ini tidak didukung di HTML5.
char	character	optional	Menyejajarkan konten di dalam tag <tbody> ke karakter. Atribut ini tidak didukung di HTML5.
charoff	number	optional	Menyetel jumlah karakter pada konten di dalam tag <tbody> yang akan disejajarkan dari karakter yang ditentukan oleh atribut char. Atribut ini tidak didukung di HTML5.
valign	top middle bottom baseline	optional	Mensejajarkan konten di dalam tag <tbody> secara vertikal dalam sebuah sel. Atribut ini tidak didukung di HTML5.

Contoh Penulisan :

<!DOCTYPE HTML>
<html>
<head>
<title>Tag table body</title>
</head>
<body>

<table border="1">
<caption>Table Data Mahasiswa:</caption>
<thead>
    <tr>
      <th>Nama</th>
      <th>Usia</th>
    </tr>
</thead>
<tbody>
    <tr>
      <td>Denis Julianto</td>
      <td>21</td>
    </tr>
    <tr>
      <td>Raizal Dzil Wafa</td>
      <td>21</td>
    </tr>
</tbody>
<tfoot>
    <tr>
      <th>Nama</th>
      <th>Usia</th>
    </tr>
</tfoot>
</table>

</body>
</html>

8. <tfoot>

Fungsi :

Tag <tfoot> digunakan untuk mengelompokan isi kaki (footer) dalam sebuah tabel HTML.

Format Penulisan :

<tfoot>...</tfoot>

Atribut :

Atribut	value	Keterangan	Deskripsi
align	left right center justify char	optional	Menyejajarkan konten di dalam tag <tfoot>. Atribut ini tidak didukung di HTML5.
char	character	optional	Menyejajarkan konten di dalam tag <tfoot> ke karakter. Atribut ini tidak didukung di HTML5.
charoff	number	optional	Menyetel jumlah karakter pada konten di dalam tag <tfoot> yang akan disejajarkan dari karakter yang ditentukan oleh atribut char. Atribut ini tidak didukung di HTML5.
valign	top middle bottom baseline	optional	Mensejajarkan konten di dalam tag <tfoot> secara vertikal dalam sebuah sel. Atribut ini tidak didukung di HTML5.

Contoh Penulisan :

<!DOCTYPE HTML>
<html>
<head>
<title>Tag table footer</title>
</head>
<body>

<table border="1">
<caption>Table Data Mahasiswa:</caption>
<thead>
    <tr>
      <th>Nama</th>
      <th>Usia</th>
    </tr>
</thead>
<tbody>
    <tr>
      <td>Denis Julianto</td>
      <td>21</td>
    </tr>
    <tr>
      <td>Raizal Dzil Wafa</td>
      <td>21</td>
    </tr>
</tbody>
<tfoot>
    <tr>
      <th>Nama</th>
      <th>Usia</th>
    </tr>
</tfoot>
</table>

</body>
</html>

9. <col>

Fungsi :

Tag <col> digunakan untuk menentukan properti kolom untuk setiap kolom dalam tag <colgroup>. Tag <col> berguna untuk menerapkan gaya (style) ke seluruh kolom pada tabel.

Format Penulisan :

<col>

Atribut :

Atribut	value	Keterangan	Deskripsi
align	left right center justify char	optional	Menyejajarkan konten yang terkait dengan tag <col>. Atribut ini tidak didukung di HTML5.
char	character	optional	Menyejajarkan konten yang terkait dengan tag <col> ke karakter. Atribut ini tidak didukung di HTML5.
charoff	number	optional	Menyetel jumlah karakter pada konten yang akan disejajarkan dari karakter yang ditentukan oleh atribut char. Atribut ini tidak didukung di HTML5.
span	number	optional	Menentukan jumlah kolom pada tag <col> yang akan digabungkan.
valign	top middle bottom baseline	optional	Mensejajarkan konten secara vertikal yang terkait dengan tag <col>. Atribut ini tidak didukung di HTML5.
width	pixels % relative_length	optional	Menentukan lebar tag <col>. Atribut ini tidak didukung di HTML5.

Contoh Penulisan :

<!DOCTYPE HTML>
<html>
<head>
<title>Tag column</title>
</head>
<body>

<table border="1">
<caption>Table Data Mahasiswa:</caption>
<colgroup>
    <col style="background-color:red">
    <col style="background-color:yellow">
</colgroup>
<tr>
    <th>Nama</th>
    <th>Usia</th>
</tr>
<tr>
    <td>Denis Julianto</td>
    <td>21</td>
</tr>
<tr>
    <td>Raizal Dzil Wafa</td>
    <td>21</td>
</tr>
</table>

</body>
</html>

10. <colgroup>

Fungsi :

Tag <colgroup> digunakan untuk menentukan sekelompok dari satu atau lebih kolom dalam tabel. Tag <colgroup> berguna untuk menerapkan gaya (style) ke seluruh kolom.

Format Penulisan :

<colgroup>...</colgroup>

Atribut :

Atribut	value	Keterangan	Deskripsi
align	left right center justify char	optional	Menyejajarkan konten dalam tag <colgroup>. Atribut ini tidak didukung di HTML5.
char	character	optional	Menyejajarkan konten dalam tag <colgroup> ke karakter. Atribut ini tidak didukung di HTML5.
charoff	number	optional	Menyetel jumlah karakter pada konten yang akan disejajarkan dari karakter yang ditentukan oleh atribut char. Atribut ini tidak didukung di HTML5.
span	number	optional	Menentukan jumlah kolom sebuah grup kolom yang akan digabungkan.
valign	top middle bottom baseline	optional	Mensejajarkan konten secara vertikal dalam tag <colgroup>. Atribut ini tidak didukung di HTML5.
width	pixels % relative_length	optional	Menentukan lebar tag <colgroup>. Atribut ini tidak didukung di HTML5.

Contoh Penulisan :

<!DOCTYPE HTML>
<html>
<head>
<title>Tag column group</title>
</head>
<body>

<table border="1">
<caption>Table Data Mahasiswa:</caption>
<colgroup>
    <col style="background-color:red">
    <col style="background-color:yellow">
</colgroup>
<tr>
    <th>Nama</th>
    <th>Usia</th>
</tr>
<tr>
    <td>Denis Julianto</td>
    <td>21</td>
</tr>
<tr>
    <td>Raizal Dzil Wafa</td>
    <td>21</td>
</tr>
</table>

</body>
</html>

Semoga materi yang saya sampaikan tentang HTML dapat dipahami poinreaders. Silakan tulis pertanyaan seputar materi yang telah dibahas pada kolom komentar. jangan lupa follow akun sosial kami agar poinreaders bisa mendapatkan materi terbaru tentang pemrograman.