Mudah Membuat Tabel dengan HTML

Seringkali artikel membuat tabel begitu rumit. Kali ini saya berusaha membuatnya lebih mudah dimengerti, terutama bagi pemula. Semoga :) ...

Seringkali artikel membuat tabel begitu rumit. Kali ini saya berusaha membuatnya lebih mudah dimengerti, terutama bagi pemula. Semoga :)

Code untuk membuat sebuah tabel adalah <table>, <tr>, dan <td>. Sebuah tabel yang paling sederhana setidaknya terdiri dari elemen <table> yang berisi dua atau lebih <tr>, dimana <tr> akan berisi dua atau lebih <td>. <table> adalah table atau tabel, <tr> adalah table row dan <td> adalah table data. Table row sama dengan row atau baris pada pembuatan tabel di Microsoft Word, sedangkan table data sama dengan kolom. Mengapa harus dua atau lebih <tr> dan <td>? Sebab, jika hanya satu berarti hanya terdiri dari satu baris dan satu kolom saja, akan terlihat sebuah kotak saja.

Contoh 1. Tabel yang terdiri dari satu <tr> dan <td>
<table>
    <tr>
        <td>1.1</td>
    </tr>
</table>

Hasil untuk Contoh 1.

1.1


Contoh 2. Tabel yang terdiri dari dua dan atau lebih <tr> dan <td>

<table>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
</table>


Hasil untuk Contoh 2.

1.1 1.2 1.3
2.1 2.2 2.3

Penomoran 1.1, 1.2, dan seterusnya memudahkan kita mengenali mana baris dan mana kolom. Jadi, nomor 1.1 berarti baris ke-1 kolom ke-1, nomor 1.2 berarti baris ke-1 kolom ke-2.

Bila Anda tidak melihat ada tabel maka tambahkan bingkai atau batas tepi agar terlihat bentuk tabelnya. Caranya tambahkan atribut border. Lebih jelas lihat contoh berikut.

Contoh 3.

<table border='1'>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
</table>

Hasil untuk Contoh 3.

1.1 1.2 1.3
2.1 2.2 2.3


Atribut border ini bisa diatur menggunakan CSS, itu artinya Anda tidak perlu menambahkan atribut border setiap kali membuat tabel. Atau dengan kata lain Anda dapat mengubah tampilan sebuah tabel melalui CSS.

Contoh Mengubah Tampilan Tabel dengan CSS dengan Menambahkan Border

Letakkan CSS berikut dalam template Anda.

table, th, td {
border:1px solid green;
}

CSS tersebut akan menambahkan border selebar 1 px dan berwarna hijau pada setiap tabel yang Anda buat walaupun Anda tidak menambahkan atribut border='1'.

Menambahkan Header dan Judul Tabel (Caption)


Perbedaan Header dan Caption sangat mudah dipahami dengan melihat contoh berikut.

<table border="1">
    <caption>Judul Tabel</caption>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
</table>


Hasil.

Judul Tabel
Header 1 Header 2 Header 3
1.1 1.2 1.3
2.1 2.2 2.3



Menggabungkan Sel-Sel Tabel (Merge Cell)

Ada dua atribut yang dapat Anda gunakan untuk tujuan ini, yaitu colspan untuk menggabungkan kolom tabel dan rowspan untuk menggabungkan baris tabel. Nilai rowspan dan colspan menunjukkan jumlah sel yang ingin disatukan. Berbeda dengan menggabungkan sel pada Microsoft Word. Bayangkan Anda memiliki sebuah tabel dengan tiga kolom pada MS Word. Jika Anda menggabungkan kolom 1 dan 2 maka tabel Anda akan otomatis menjadi dua kolom saja, yaitu kolom 1 dan 2 yang sudah menjadi satu kolom dan kolom 3. Sedangkan tabel HTML tidak demikian. Jika Anda menggabungkan kolom 1 dan 2 maka lebar kolom 1 akan bertambah lebarnya, dan kolom 2 akan tergeser ke kanan dengan pas, dan kolom 3 juga akan tergeser ke kanan ke luar tabel. Oleh karena itu Anda harus menghapus kolom 3 agar bentuk tabel Anda benar.

Lebih jelas lihat contoh berikut, saya akan menggabungkan kolom 1.1 dengan kolom 1.2.

HTML sebelum gabung.

<table border="1">
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Hasilnya.

Header 1Header 2Header 3
1.11.21.3
2.12.22.3


HTML Setelah gabung.

<table border="1">
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td colspan='2'>1.1</td><td>1.2</td><td>1.3</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Hasilnya.
Header 1Header 2Header 3
1.11.21.3
2.12.22.3


Coba perhatikan kolom 1.3! Keluar dari tabel bukan? Oleh karena itu Anda harus menghapus kolom 1.3 itu.

HTML setelah gabung dan hapus kolom 1.3

<table border="1">
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
    <tr><td colspan='2'>1.1</td><td>1.2</td></tr>
    <tr><td>2.1</td><td>2.2</td><td>2.3</td></tr>
</table>

Hasilnya.

Header 1Header 2Header 3
1.11.2
2.12.22.3

Selamat belajar.

COMMENTS

BLOGGER: 1

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Mudah Membuat Tabel dengan HTML
Mudah Membuat Tabel dengan HTML
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6l9YuwD_RJu96tgbZy1S4AIBJoVYmrq8dFhh8p9poTQ0iqkbcQBMWu-g7Vcl5PnKQlCQQJka29Upr92GCsxojrhDKbgkHt0_6ebwmSmPj0_EtNpsNW7fN2t6Wsnf4HH1GpqHqwo6SGwI/s1600/membuat+tabel+di+blogger.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6l9YuwD_RJu96tgbZy1S4AIBJoVYmrq8dFhh8p9poTQ0iqkbcQBMWu-g7Vcl5PnKQlCQQJka29Upr92GCsxojrhDKbgkHt0_6ebwmSmPj0_EtNpsNW7fN2t6Wsnf4HH1GpqHqwo6SGwI/s72-c/membuat+tabel+di+blogger.png
Jelas in Blog
https://jelasinblog.blogspot.com/2014/05/mudah-membuat-tabel-dengan-html.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2014/05/mudah-membuat-tabel-dengan-html.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content