Table HTML

Sebuah table dimulai dengan tag <table>.

Tag row <tr> berguna untuk menandakan row atau atau baris vertikal. Sedangkan tag data <td> berguna untuk menandakan column atau baris horizontal.

Contoh 1:

<table>
    <tr>
        <td>Row 1 Column 1</td>
        <td>Row 1 Column 2</td>
    </tr>
    <tr>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
    </tr>
</table>

Hasil contoh 1:

Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2

Pada contoh di atas kita bisa melihat bahwa code table bekerja berurutan berdasarkan row <tr>. Setelah itu, baru column <td> kita masukkan di dalam setiap row <tr>.

Atribut border

Border (garis tepi) disetiap sisi cell (kotak) bisa diatur menggunakan atribut border.

Syntax

<table border="1|0">
  • 0 – Menambahkan border di sekeliling cell.
  • 1 – Tidak ada border di sekeliling cell.

Update: Atribut border telah deprecated pada HTML5, gunakan CSS border. Berikut ini adalah contoh penggunaan CSS border:

Contoh 2:

<table style="border: 1px solid;">
    <tr>
        <td style="border: 1px solid;">Row 1 Column 1</td>
        <td style="border: 1px solid;">Row 1 Column 2</td>
    </tr>
    <tr>
        <td style="border: 1px solid;">Row 2 Column 1</td>
        <td style="border: 1px solid;">Row 2 Column 2</td>
    </tr>
</table>

Hasil contoh 2:

Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2

Tag heading <th>

Tag heading <th> berguna untuk menandakan bagian heading atau kepala sebuah table. Text yang berada di dalam tag <th> akan ditampilkan bold dan center.

Contoh 3:

<table style="border: 1px solid;">
    <tr>
        <th style="border: 1px solid;">Nama</th>
        <th style="border: 1px solid;">Points</th>
    </tr>
    <tr>
        <td style="border: 1px solid;">Indrawan</td>
        <td style="border: 1px solid;">60</td>
    </tr>
    <tr>
        <td style="border: 1px solid;">Yoga</td>
        <td style="border: 1px solid;">84</td>
    </tr>
    <tr>
        <td style="border: 1px solid;">Dika</td>
        <td style="border: 1px solid;">70</td>
    </tr>
</table>

Hasil contoh 3:

Nama Points
Indrawan 60
Yoga 84
Dika 70

Atribut rowspan dan colspan

Atribut rowspan berguna untuk menggabung row dan atribut colspan berguna untuk menggabung column.

Contoh 4:

<table style="border: 1px solid;">
    <tr>
        <th style="border: 1px solid;">Row 1 Column 1</th>
        <th style="border: 1px solid;">Row 1 Column 2</th>
        <th style="border: 1px solid;">Row 1 Column 3</th>
    </tr>
    <tr>
        <td rowspan="2" style="border: 1px solid;">Row 2 Column 1</td>
        <td style="border: 1px solid;">Row 2 Column 2</td>
        <td style="border: 1px solid;">Row 2 Column 3</td>
    </tr>
    <tr>
        <td style="border: 1px solid;">Row 3 Column 2</td>
        <td style="border: 1px solid;">Row 3 Column 3</td>
    </tr>
    <tr>
        <td colspan="3" style="border: 1px solid;">Row 4 Column 1</td>
    </tr>
</table>

Hasil contoh 4:

Row 1 Column 1 Row 1 Column 2 Row 1 Column 3
Row 2 Column 1 Row 2 Column 2 Row 2 Column 3
Row 3 Column 2 Row 3 Column 3
Row 4 Column 1

Pada contoh di atas, 2 row digabung jadi 1 dan 3 column digabung jadi 1.

Atribute cellpadding

Atribute cellpadding berguna untuk menentukan jarak antara border dan isi cell.

Syntax

<table cellpadding="pixels">

Update: Atribut cellpadding telah deprecated pada HTML5, gunakan CSS padding. Berikut ini adalah contoh penggunaan CSS padding:

Contoh 5:

<table style="border: 1px solid;">
    <tr>
        <th style="border: 1px solid; padding: 5px;">Row 1 Column 1</th>
        <th style="border: 1px solid;">Row 1 Column 2</th>
    </tr>
    <tr>
        <td style="border: 1px solid;">Row 2 Column 1</td>
        <td style="border: 1px solid;">Row 2 Column 2</td>
    </tr>
    <tr>
        <td style="border: 1px solid; padding: 25px;">Row 3 Column 1</td>
        <td style="border: 1px solid;">Row 3 Column 2</td>
    </tr>
</table>

Hasil contoh 5:

Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2
Row 3 Column 1 Row 3 Column 2

Atribut cellspacing

Atribute cellspacing berguna untuk menentukan jarak antara cell.

Syntax

<table cellspacing="pixels">

Update: Atribut cellspacing telah deprecated pada HTML5, gunakan CSS border-spacing. Berikut ini adalah contoh penggunaan CSS border-spacing:

Contoh 6:

<table style="border: 1px solid; border-spacing: 20px;">
    <tr>
        <th style="border: 1px solid;">Row 1 Column 1</th>
        <th style="border: 1px solid;">Row 1 Column 2</th>
    </tr>
    <tr>
        <td style="border: 1px solid;">Row 2 Column 1</td>
        <td style="border: 1px solid;">Row 2 Column 2</td>
    </tr>
    <tr>
        <td style="border: 1px solid;">Row 3 Column 1</td>
        <td style="border: 1px solid;">Row 3 Column 2</td>
    </tr>
</table>

Hasil contoh 6:

Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2
Row 3 Column 1 Row 3 Column 2

Tag caption <caption>

Tag <caption> berguna untuk memberi keterangan atau judul table.

Contoh 7:

<table style="border: 1px solid;">
<caption>Table list</caption>
    <tr>
        <td style="border: 1px solid;">Row 1 Column 1</td>
        <td style="border: 1px solid;">Row 1 Column 2</td>
    </tr>
    <tr>
        <td style="border: 1px solid;">Row 2 Column 1</td>
        <td style="border: 1px solid;">Row 2 Column 2</td>
    </tr>
</table>

Hasil contoh 7:

Table list
Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2

Tag <colgroup>

Tag <colgroup> berguna untuk mengelompokkan satu atau lebih column untuk diformat.

Contoh 8:

<table style="border: 1px solid;">
<colgroup>
    <col span="2" style="background-color: red;">
    <col span="1" style="background-color: yellow;">
</colgroup>
    <tr>
        <th style="border: 1px solid;">Row 1 Column 1</th>
        <th style="border: 1px solid;">Row 1 Column 2</th>
        <th style="border: 1px solid;">Row 1 Column 3</th>
    </tr>
    <tr>
        <td style="border: 1px solid;">Row 2 Column 1</td>
        <td style="border: 1px solid;">Row 2 Column 2</td>
        <td style="border: 1px solid;">Row 2 Column 3</td>
    </tr>
    <tr>
        <td style="border: 1px solid;">Row 3 Column 1</td>
        <td style="border: 1px solid;">Row 3 Column 2</td>
        <td style="border: 1px solid;">Row 3 Column 3</td>
    </tr>
</table>

Hasil contoh 8:

Row 1 Column 1 Row 1 Column 2 Row 1 Column 3
Row 2 Column 1 Row 2 Column 2 Row 2 Column 3
Row 3 Column 1 Row 3 Column 2 Row 3 Column 3

Catatan

Tag <colgroup> harus diletakkan di dalam tag <table>, setelah tag <caption> dan sebelum tag <thead>, <tbody>, <tfoot> dan tag <tr>.

Tag <col> berguna untuk menentukan format yang akan digunakan.

Atribut span berguna untuk menentukan jumlah column yang akan diformat.

Tag <thead>, <tfoot> dan <tbody>

Tag <thead>, <tfoot> dan <tbody> berguna untuk mengelompokkan bagian heading, foot dan body dari sebuah table.

Contoh 9:

<table style="border: 1px solid;">
<thead style="color:green;">
    <tr>
        <th style="border: 1px solid;">Bulan</th>
        <th style="border: 1px solid;">Pemasukan</th>
    </tr>
</thead>
<tfoot style="color:red;">
    <tr>
    <td style="border: 1px solid;">Jumlah</td>
    <td style="border: 1px solid;">Rp 18,000</td>
    </tr>
</tfoot>
<tbody style="color:blue;">
    <tr>
<td style="border: 1px solid;">January</td>
<td style="border: 1px solid;">Rp 10,000</td>
    </tr>
    <tr>
        <td style="border: 1px solid;">February</td>
        <td style="border: 1px solid;">Rp 8,000</td>
    </tr>
</tbody>
</table>

Hasil contoh 9:

Bulan Pemasukan
Jumlah Rp 18,000
January Rp 10,000
February Rp 8,000

Catatan

Jika ingin bagian header, body dan footer dari table tampil dalam style yang berbeda maka tag <thead>, <tfoot> dan <tbody> bisa diformat lebih lanjut.

Browser dapat membedakan bagian heading, body dan footer dari table setelah table diberi tag <thead>, <tfoot> dan <tbody>.

Saat mem-print table yang terdiri dari banyak cell maka bagian header dan footer bisa diprint pada bagian atas dan bawah setiap halaman.

Tag <thead> harus ditempatan setelah tag <caption> dan <colgroup> dan sebelum tag <tbody>, <tfoot> dan <tr>.

Tag <tbody> harus ditempatan setelah tag <caption>, <colgroup> dan <thead>.

Tag <tfoot> harus ditempatan setelah tag <caption>, <colgroup> dan <thead> dan sebelum tag <tbody> dan <tr>

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>