Tutorial Membuat Tabel Di HTML

Tutorial HTML Lanjutan: Tag dan Atribut untuk Pembuatan Tabel HTML
23 Feb 14 | Andre | Tutorial HTML | No Comments

Jika pada tutorial HTML: Cara Membuat tabel di HTML (tag table) kita telah mempelajari
cara dan langkah-langkah yang digunakan untuk membuat tabel HTML sederhana, maka
dalam beberapa tutorial kedepan saya membuat tutorial lanjutan untuk mempelajari lebih
dalam tentang tag dan atribut tabel di dalam HTML.
Dalam penggunaannya, HTML masih memiliki banyak tag dan atribut yang dapat digunakan
untuk membuat tabel yang lebih kompleks, seperti atribut cellpadding, cellspacing, tag
thead, tag tbody, dan lain-lain.
Diharapkan dengan Tutorial HTML Lanjutan: Tag dan Atribut untuk Pembuatan Tabel
HTML ini, anda dapat menguasai bagaimana cara perancangan tabel di dalam HTML
Tutorial Tabel HTML Part 1: Mengenal atribut border, cellpadding dan cellspacing dalam
Tabel
05 May 13 | Andre | Tutorial HTML | 21 Comments
Setelah sebelumnya pada tutorial HTML dasar kita mempelajari cara membuat tabel di
HTML, pada tutorial kali ini kita akan mempelajari penggunaan atribut border,
cellpadding dan cellspacing dalam tabel.
Atribut border, cellpadding dan cellspacing digunakan untuk mengubah tampilan tabel,
terutama berkaitan dengan border dan spasi diantara sel tabel.
Atribut border dalam tabel HTML
Atribut border digunakan untuk mengatur ketebalan dari garis tepi (border) dari tabel. Jika
atribut ini tidak ditulis, maka web browser akan menampilkan tabel tanpa garis tepi.
Nilai dari atribut ini berupa angka yang diukur dalam satuan pixel. Jika anda memberikan
nilai border=2, maka web browser akan menampilkan garis tepi sebesar 2 pixel pada sisi
atas, bawah, kiri dan kanan tabel.
Berikut adalah contoh penggunaan atribut border dalam tag table HTML:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Penggunaan atribut border dalam Tabel</title>
5 </head>
6 <body>
7 <h3>Belajar atribut border dalam Tabel</h3>
8 <table border="0">
9 <tr>
10 <td>Baris 1, Kolom 1</td>
13 </tr>
14 <tr>
18 </tr>
19 </table>
20 <br />
21
23 <tr>
27 </tr>
28 <tr>
32 </tr>
33 </table>
34 </body>
35 </html>
Dengan memberikan nilai 0 kepada atribut border, tabel seolah-olah tidak memiliki garis
tepi.
Perhatikan bahwa jika anda mengubah border=1 menjadi border=5 misalnya, maka garis
border yang terkena efek hanya border pada sisi luar tabel, namun tidak untuk garis border
di dalam tabel.
Atribut cellpadding dalam tabel HTML
Atribut cellpadding digunakan untuk mengatur jarak dari border sisi dalam tabel dengan isi
text tabel itu sendiri.
nilai cellpadding=2, maka web browser akan membuat jarak sebesar 2 pixel dari border
sisi dalam tabel dengan isi text tabel.
Berikut contoh penggunaan atribut cellpadding dalam tag table HTML:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Penggunaan atribut cellpadding dalam Tabel</title>
5 </head>
6 <body>
7 <h3>Belajar atribut cellpadding dalam Tabel</h3>
8 <table border="1" cellpadding="0">
9 <tr>

13 </tr>
14 <tr>
18 </tr>
19 </table>
20 <br />
21
22 <table border="1" cellpadding="7">
23 <tr>
27 </tr>
28 <tr>
32 </tr>
33 </table>
34 </body>
35 </html>
Pengaturan cellpadding yang tepat akan membuat isi text tabel menjadi lebih rapi dan
mudah dibaca.
Atribut cellspacing dalam tabel HTML
Atribut cellspacing digunakan untuk mengatur jarak antara garis tepi (border) bagian dalam
dan luar.
nilai cellspacing=2, maka web browser akan menampilkan jarak sebesar 2 pixel diantara
garis border tabel.
Berikut contoh penggunaan atribut cellspacing dalam tag table HTML:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Penggunaan atribut cellspacing dalam Tabel</title>
5 </head>
6 <body>
7 <h3>Belajar atribut cellspacing dalam Tabel</h3>
8 <table border="1" cellspacing="0">
9 <tr>
13 </tr>
14 <tr>
18 </tr>
19 </table>
20 <br />
21
22 <table border="1" cellspacing="7">
23 <tr>
27 </tr>
28 <tr>
32 </tr>
33 </table>
34 </body>
35 </html>
Menggabungkan ketiga atribut tersebut dalam sebuah tabel, maka kita dapat menyesuaikan
tampilan tabel sesuai dengan keinginan kita.
Tutorial Tabel HTML Part 2: Cara Menggabungkan Sel Tabel (atribut rowspan dan colspan)
25 Nov 13 | Andre | Tutorial HTML | 4 Comments
Untuk tampilan tabel, kadang kita butuh membuat tabel dengan jumlah kolom yang
berbeda antara baris pertama dan baris lainnya, atau menggabungkan sebuah sel tabel
dengan sel lainnya. Untuk keperluan ini, HTML menyediakan atribut rowspan dan colspan.
Dalam tutorial cara menggabungkan sel Tabel HTML ini, kita akan mempelajari cara
penggunaannya.
Fungsi Atribut Rowspan and Colspan
Atribut rowspan and colspan digunakan untuk membuat sel tabel bersatu dengan sel yang
lain. Atribut ini diletakkan pada tag td dari sebuah tabel. Agar mudah memahami, langsung
saja kita buat contoh kode HTMLnya.
Buka aplikasi text editor, ketikkan kode berikut, dan save sebagai tabelspan.html
Contoh penggunaan atribut rowspan and colspan:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Contoh Penggunaan Atribut Colspan dan Rowspan Tag Tabel</title>
5 </head>
6 <body>
7 <h1>Contoh atribut colspan dan rowspan </h1>
9 <tr>
13 </tr>
14 <tr>
16 <td colspan="2" >Baris 2, Kolom 2 & 3</td>
17 </tr>
18 <tr>
19 <td rowspan="2"> Baris 3 & 4, Kolom 1</td>
20 <td> Baris 3, Kolom 2</td>
22 </tr>
23 <tr>
26 </tr>
27 </table>
28 </body>
29 </html>
Dalam contoh diatas, kita dapat melihat bahwa tag td yang memiliki atribut colspan, akan
membuat sel tabel bersatu dengan kolom disebelahnya. Sedangkan atribut rowspan akan
membuat sel tabel bersatu dengan baris dibawahnya. Kedua atribut ini membutuhkan nilai
(value), dimana nilai ini adalah seberapa banyak sel tabel yang dibuat bersatu.
Misalkan colspan=3 akan membuat 3 kolom bergabung menjadi 1 sel,
dan rowspan=2 akan membuat sel tabel bersatu dengan 1 baris dibawahnya.
Dalam membuat tabel dengan atribut rowspan dan clospan, anda sebaiknya telah
mengkalkulasi seberapa besar tabel yang akan dibuat, karena dengan semakin kompleks
tabel, akan semakin rumit untuk menggabungkan beberapa sel tabel tersebut.
Untuk tutorial pembuatan tabel HTML berikutnya, kita akan membahas tentang tag th yang
digunakan untuk membuat kolom header, atau judul kolom di dalam tabel HTML di
dalam Tutorial Tabel HTML: Cara Membuat Kolom Header Untuk Tabel (tag th).
Tutorial Tabel HTML Part 3: Cara Membuat Judul Kolom Header Tabel HTML (tag th)
Dalam tutorial tabel HTML: cara membuat judul kolom header tabel HTML ini, kita akan
mempelajari fungsi tag th. Tag th digunakan untuk membuat judul kolom (kolom header)
dalam tabel HTML.
Fungsi Tag th
Sering kali dalam membuat tabel, baris pertama kita gunakan sebagai judul kolom dari baris-
baris dibawahnya. Dan biasanya baris pertama tabel ini secara visual dibedakan dengan
baris dibawahnya agar tampak lebih menarik, misalnya diberi warna yang berbeda, atau
font yang berbeda.
Untuk keperluan ini, HTML memiliki tag khusus yang bisa digunakan, yaitu tag th (singkatan
dari table head) . Dalam penggunaan tag th, kita hanya perlu mengganti
tag td dengan th pada baris pertama tabel.
Sebagai contoh cara penggunaan tag th, silahkan buka aplikasi text editor, ketikkan kode
berikut, dan save sebagai tabelth.html
Contoh penggunaan tag th:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Cara Penulisan Tag th dalam Tabel HTML</title>
5 </head>
6 <body>
7 <h2>Belajar Tag th untuk Tabel HTML</h2>
9 <tr>
10 <th>Judul 1</th>
11 <th>Judul 2</th>
12 <th>Judul 3</th>
13 </tr>
14 <tr>
18 </tr>
19 <tr>
23 </tr>
24 </table>
25 </body>
26 </html>
Perhatikan pada baris pertama tabel, dimana dalam tutorial tentang tabel HTML
sebelumnya, semua sel dari tabel ditulis menggunnakan tag td. Namun, kali ini tag td kita
ganti menjadi tag th.
Tag th secara default akan ditampilkan sedikit berbeda pada beberapa web browser.
Pada mozilla firefox yang saya gunakan, tag th ditampilkan dengan huruf tebal dan berada di
tengah-tengah kolom.
Dengan menggunakan atribut style ataupun dengan CSS, kita dapat merubah tampilan huruf
pada tag td biasa menjadi tag th tersebut. Tag th lebih diperuntukkan untuk memberikan
struktur pada tabel. Sedapat mungkin kita menggunakan HTML hanya untuk stuktur,
mengenai tampilan sebaiknya menggunakan CSS
Tutorial Tabel HTML Part 4: Cara Membuat Judul Tabel HTML (tag caption)
Dalam tutorial tabel HTML: Cara Membuat Judul Tabel HTML (tag caption) ini, kita akan
mempelajari fungsi tag caption yang digunakan untuk membuat judul atau keterangan dari
tabel.
Fungsi Tag caption
Tag caption berfungsi untuk membuat judul tabel di dalam HTML. Tag ini agak jarang
digunakan, namun sebenarnya sangat bermanfaat. Dengan mempelajari tag caption ini, kita
mengetahui bahwa HTML telah menyediakan tag khusus untuk membuat judul tabel.
Tag caption digunakan untuk membuat judul maupun memberikan keterangan untuk
sebuah tabel HTML. Penulisan tag caption harus ditulis setelah tag pembuka tabel (setelah
tag table).
Kita langsung saja ke contoh penggunaan tag caption ini. Silahkan buka aplikasi text editor,
ketikkan kode berikut, dan savelah sebagai tabelcaption.html
Contoh penggunaan tag caption:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Cara Penulisan Tag Caption Tabel HTML</title>
5 </head>
6 <body>
7 <h2>Belajar Tag caption untuk Tabel HTML</h2>
9 <caption>Contoh Caption Tabel</caption>
10 <tr>
11 <th>Judul 1</th>
12 <th>Judul 2</th>
13 <th>Judul 3</th>
14 </tr>
15 <tr>
19 </tr>
20 <tr>

24 </tr>
25 </table>
26 </body>
27 </html>
Ketika
dijalankan pada web browser, tag caption tersebut akan ditampilkan sebelum tabel,
sehingga cocok untuk membuat keterangan dari tabel.
Selain menggunakan tag caption, banyak web developer menggunakan tag header untuk
judul dari kolom, seperti tag h3 atau h4 karena bisa meningkatkan nilai judul tabel di dalam
search engine (Search Engine Optimization). Namun setidaknya kita mengetahui bahwa
HTML menyediakan tag caption ini sebagai fitur dalam membuat tabel HTML agar tampak
lebih informatif.
Tutorial Tabel HTML Part 5: Cara Membuat Struktur Tabel HTML (tag thead, tfoot dan tbody)
04 Dec 13 | Andre | Tutorial HTML | 5 Comments

Untuk tabel yang lebih kompleks, HTML menyediakan tag-tag yang dapat digunakan untuk
membagi tabel menjadi bagian-bagian yang terpisah, misalnya bagian judul (head), bagian
penutup (foot), dan bagian isi tabel (body). Untuk keperluan tersebut, pada tutorial tabel
HTML kali ini kita akan mempelajari Cara Membuat Struktur Tabel HTML dengan tag thead,
tfoot dan tbody.
Seperti yang telah kita pelajari dalam tutorial tentang pembuatan tabel, sebuah tabel dapat
dirancang dengan menggunakan 3 tag saja, yaitu tag table, tag tr, dan tag td. Namun jika
kita membutuhkan pembagian struktur tabel HTML yang lebih jelas, HTML menyediakan tag
khusus untuk keperluan ini, terdiri dari tag thead, tfoot dan tbody.
Untuk lebih memahami maksud dan cara penggunaan tag thead, tfoot dan tbody, langsung
saja kita tampilkan kode HTMLnya. Silahkan buka aplikasi text editor, lalu ketikkan kode
berikut, dan save sebagai tabelstruktur.html.
Contoh penggunaan tag thead, tfoot dan tbody:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Penggunaan Tag thead, tfoot dan tbody dalam Tabel</title>
5 </head>
6 <body>
7 <h3>Belajar Tag thead, tfoot dan tbody dalam Tabel</h3>
9 <thead>
10 <tr>
11 <th>Judul 1</th>
12 <th>Judul 2</th>
13 <th>Judul 3</th>
14 </tr>
15 </thead>
16 <tfoot>
17 <tr>
18 <td>Footer 1</td>
21 </tr>
22 </tfoot>
23 <tbody>
24 <tr>
28 </tr>
29 <tr>
33 </tr>
34 </tbody>
35 </table>
36 </body>
37 </html>
Kode
HTML diatas terasa sedikit panjang untuk membuat sebuah tabel bila dibandingkan sewaktu
membuat tabel sederhana dalam tutorial Cara Membuat tabel di HTML (tag table).
Kembali kedalam kode HTML diatas, perhatikan tag pembuka dan penutup untuk setiap
tag tr dalam tabel. Terlihat bahwa kita menggunakan 3 tag baru, yakni tag thead,
tfoot dan tbody(singkatan dari table header, table foot, dan table body). Ketiga tag tersebut
digunakan untuk membagi struktur tabel menjadi 3 bagian.
Perhatikan pula urutan penulisan tabel diatas. Dapat dilihat bahwa untuk tag tfoot,
walaupun dibuat persis setelah thead pada awal tabel, namun web browser akan
menampilkannya pada baris terakhir dari tabel.
Tag thead, tfoot dan tbody mungkin tidak akan sering dipakai, terutama untuk membuat
tabel sederhana dengan jumlah baris kurang dari 10. Namun untuk tabel yang kompleks,
struktur HTML seperti ini akan memudahkan dalam mengatur tampilan tabel, terutama jika
menggunakan kode CSS nantinya.
Untuk tutorial selanjutnya, kita akan membahas tentang cara membuat kolom tabel menjadi
satu grup dengan tag colgroup dan tag col.
Tutorial Tabel HTML Part 6: Cara Membuat Group Kolom Tabel (tag colgroup dan tag col)
Seperti yang telah kita bahas pada artikel tutorial tabel HTML sebelumnya, maka jika anda
perhatikan bahwa sebuah tabel di dalam HTML dibuat secara baris per baris dengan
menyusun beberapa tag td di dalam tag tr. Pola penyusunan seperti ini akan terasa
menyulitkan jika kita ingin merubah atribut yang berlaku untuk seluruh kolom, terutama jika
menggunakan CSS.
Jika sebelumnya anda telah mempelajari CSS, untuk memanipulasi sebuah baris, kita hanya
perlu membuat atribut class atau style pada tag tr, dan seluruh baris tersebut akan berubah,
namun tidak sebaliknya jika kita ingin membuat seluruh kolom berubah. Contoh kasusnya,
misalkan kita ingin merubah warna background pada seluruh kolom pertama dan ketiga dari
tabel.
Untuk keperluan ini, HTML memiliki tag colgroup dan tag col yang berfungsi untuk
mengaitkan keseluruhan kolom. Tanpa tag ini kita harus mengakses satu per satu sel tabel.
Sebagai contoh penggunaan tag ini, silahkan buka aplikasi text editor, lalu ketikkan kode
berikut, dan save sebagai tabelcol.html
Contoh penggunaan tag colgroup dan tag col :
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Penggunaan tag colgroup dan col dalam Tabel</title>
5 </head>
6 <body>
7 <h3>Belajar Tag colgroup dan col dalam Tabel</h3>
9 <colgroup>
10 <col style="background-color:yellow" />
11 <col style="background-color:green" />

12 <col />
13 </colgroup>
14 <tr>
15 <th>Judul 1</th>
16 <th>Judul 2</th>
17 <th>Judul 3</th>
18 </tr>
19 <tr>
23 </tr>
24 <tr style="color:blue">
28 </tr>
29 </table>
30 </body>
31 </html>
Untuk contoh diatas, saya menggunakan tag style untuk memasukkan kode CSS. Lebih jauh
tentang CSS, silahkan mempelajarinya pada Tutorial Belajar CSS.
Di dalam kode HTML tersebut, tag colgroup dan tag col dibuat pada baris pertama sebelum
tag tr tabel. Setiap tag col harus disesuaikan dengan jumlah kolom dari tabel. Dengan
merubah style pada tag col, efeknya seluruh sel tabel pada kolom tersebut juga akan
berubah. Untuk baris, hal yang sama dapat kita lakukan dengan merubah atribut dari tag tr.
Penggunaan atribut width pada tag col
Salah satu atribut yang bisa kita gunakan pada tag col adalah atribut width. Atribut ini
digunakan untuk mengatur lebar dari masing-masing kolom dalam tabel.
Buka aplikasi text editor, ketikkan kode berikut, dan save sebagai tabelcolwidth.html
Contoh penggunaan atribut width pada tag col :
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Belajar atribut width dalam Tabel</title>
5 </head>
6 <body>
7 <h3>Belajar atribut width dalam Tabel</h3>
9 <colgroup>
10 <col width="75px" style="background-color:blue" />
11 <col width="150px" />
12 <col width="300px" />
13 </colgroup>
14 <tr>
15 <th>Judul 1</th>
16 <th>Judul 2</th>
17 <th>Judul 3</th>
18 </tr>
19 <tr>
23 </tr>
24 <tr>

28 </tr>
29 </table>
30 </body>
31 </html>
Dari contoh kode HTML diatas, saya menggunakan atribut width untuk mengatur lebar dari
kolom tabel. Misalnya untuk kolom pertama, atribut width=75px digunakan untuk
membuat lebar kolom menjadi 75 pixel. Lebih lanjut tentang atribut width, akan saya bahas
secara tersendiri pada tutorial selanjutnya.
Tutorial Tabel HTML Part 7: Cara Membuat Garis Antara Baris dan Kolom Tabel (atribut
rules)

Pada tutorial kali ini kita akan membahas tentang atribut rules. Atribut ini dapat digunakan
untuk membuat dan mengubah garis pembatas antar sel (baris dan kolom) di dalam tabel
HTML.
Karena atribut ini sangat berkaitan dengan tampilan untuk memperindah tabel, disarankan
menggunakan CSS sebagai ganti atribut rules ini jika anda telah memahami CSS.
Jika sebelumnya anda telah mempelajari pembahasan tentang atribut border untuk tabel,
maka jika diperhatikan, web browser sebenarnya tidak hanya menampilkan border, namun
juga garis pembatas di antara sel tersebut, seperti tampilan dibawah ini:
HTML menyediakan sebuah atribut yang dapat digunakan untuk mengontrol garis pembatas
antara baris dan kolom ini, yakni atribut rules. Penulisan atribut rules di letakkan pada
tag table. Atribut rules dapat berisi 1 diantara 4 nilai: rows, cols, all, atau none.
Sesuai dengan arti dari masing-masing nilai tersebut, jika kita menambahkan
atribut rules=cols pada tabel, maka untuk setiap sel akan ditampilkan garis pembatas
hanya diantara kolom. Sedangkan atribut rules=rows akan menampilkan garis pembatas
hanya diantara baris.
Jika menginginkan garis tampil baik untuk kolom maupun untuk baris tabel, kita dapat
menggunakan atribut rules=all. Sebaliknya jika tidak ingin menampilkan garis apapun
diantara sel, bisa menggunakan atribut rules=none.
Berikut adalah contoh dari kode HTML yang menggunakan atribut rules, savelah
sebagai tabelrules.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Contoh pemakaian attribut rules dalam Tabel HTML</title>
5 </head>
6 <body>
7 <h2>Belajar atribut rules dalam Tabel HTML</h2>
8
9 <h4>rules = "rows"</h4>
10 <table rules="rows">
11 <tr>
12 <th>Judul 1</th>
13 <th>Judul 2</th>
14 <th>Judul 3</th>
15 </tr>
16 <tr>
20 </tr>
21 <tr>
25 </tr>
26 <tr>
30 </tr>
31 </table>
32
33 <h4>rules = "cols"</h4>
34 <table rules="cols">
35 <tr>
36 <th>Judul 1</th>
37 <th>Judul 2</th>
38 <th>Judul 3</th>
39 </tr>
40 <tr>
44 </tr>
45 <tr>
49 </tr>
50 <tr>
54 </tr>
55 </table>
56
57 <h4>rules = "all"</h4>
58 <table rules="all">
59 <tr>
60 <th>Judul 1</th>
61 <th>Judul 2</th>
62 <th>Judul 3</th>
63 </tr>
64 <tr>
68 </tr>
69 <tr>
73 </tr>
74 <tr>
78 </tr>
79 </table>
80
81 <h4>rules="none", border="1"</h4>
82 <table rules="none" border="1" >
83
84 <tr>
85 <th>Judul 1</th>
86 <th>Judul 2</th>
87 <th>Judul 3</th>
88 </tr>
89 <tr>
93 </tr>
94 <tr>
98 </tr>
99 <tr>
103 </tr>
104 </table>
105
106 </body>
107 </html>
Dari hasil
kode HTML diatas, terlihat perbedaan untuk masing-masing nilai rules. Anda bisa
menggabungkan berbagai atribut lainnya seperti border, cellspacing, dan lain-lain untuk
menghasilkan tabel sesuai dengan keinginan.
Tutorial Tabel HTML Part 8: Cara Mengatur dan Mengubah Lebar Tabel HTML (atribut width)
Secara default bawaan HTML, setiap tabel akan diatur lebarnya secara otomatis dari besar
data yang ada didalam tabel tersebut, namun jika kita ingin memaksakan web browser
untuk menampilkan tabel dengan lebar tertentu, kita bisa menambahkan sebuah atribut
width untuk mengatur lebar tabel.
Sama seperti penjelasan pada tutorial tentang rules, jika anda telah memahami CSS,
disarankan menggunakan CSS untuk memanipulasi tampilan dari tabel dibandingkan
menggunakan atribut width secara langsung didalam tag HTML.
Berikut adalah contoh tabel yang memiliki perbedaan panjang untuk baris:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Contoh pemakaian attribut width dalam Tabel HTML</title>
5 </head>
6 <body>
7 <h2>Belajar atribut width dalam Tabel HTML</h2>
9 <caption>------------Tabel Tanpa Atribut Width--------------</caption>
10 <tr>
11 <th>Judul 1</th>
12 <th>Judul 2</th>
13 <th>Judul 3</th>
14 </tr>
15 <tr>
19 </tr>
20 <tr>
21 <td>Data yang sangat panjang,
22 sehingga merusak tampilan dari tabel</td>
25 </tr>
26 <tr>
30 </tr>
31 </table>
32 </body>
33 </html>
Dapat dilihat bahwa web browser menampilkan tabel sesuai dengan panjang data yang
terdapat pada baris terpanjang, dan jika anda mencoba mengecilkan jendela web browser,
tampilan tabel akan bergeser menyesuaikan dengan lebar web browser. Inilah tampilan
default dari tabel HTML.
Mengatur Lebar Tabel Dengan Atribut Width
Atribut width dapat digunakan untuk tag tabel (tag table) maupun untuk tag kolom (tag th,
tag td, maupun tag col). Jika diletakkan pada tag table, atribut ini berfungsi untuk mengatur
lebar tabel secara keseluruhan. Namun jika diletakkan pada tag th atau td, atribut ini akan
berfungsi untuk mengatur lebar kolom.
Untuk memaksa web browser menampilkan lebar tabel sesuai dengan yang diinginkan,
kita dapat menambahkan atribut width pada tag table, seperti contoh berikut:
Contoh penggunaan atribut width tabel HTML, tabelwidth.html
1 <!DOCTYPE html>
2 <html>
3 <head>

5 </head>
6 <body>
8 <table border="1" width="600px">
9 <caption>------------Lebar Tabel 600px--------------</caption>
10 <tr>
11 <th>Judul 1</th>
12 <th>Judul 2</th>
13 <th>Judul 3</th>
14 </tr>
15 <tr>
19 </tr>
20 <tr>
25 </tr>
26 <tr>

30 </tr>
31 </table>
32 </body>
33 </html>
Jika anda mencoba mengubah kembali ukuran web browser, tampilan tabel akan tetap,
sesuai dengan nilai dari atribut width.
Atribut width dapat berisi nilai fixed (tetap), yakni dalam satuan pixel (misalnya: 400px,
600px), maupun nilai relatif dalam bentuk persen (misalnya: 30%, 60%).
Jika kita menggunakan nilai relatif seperti 50%, maka lebar tabel akan ditampilkan sebesar
50% dari tag induk (tag parent) dari tab tabel. Sepanjang contoh kita disini, tag parent dari
tag table adalah tag body. Namun untuk tag body ini, kita tidak merubah nilai widthnya, dan
secara default mencakup seluruh lebar web browser. Sehingga jika sebuah tabel memiliki
lebar 50%, maka ukurannya adalah 50% dari layar web browser.
Mengatur Lebar Kolom Dengan Atribut Width
Pada contoh tabelwidth.html diatas, walaupun kita telah mengatur lebar dari tabel, namun
lebar masing-masing kolom akan dibagi secara proporsional oleh web browser. Untuk
mengatur lebar kolom tabel secara individu, maka atribut width harus diletakkan pada tag
kolom (tag th, td, maupun tag col).
Namun syarat agar kita bisa mengatur lebar masing-masing kolom, lebar tabel juga telah
ditentukan terlebih dahulu melalui atribut width pada tag table.
Berikut adalah contoh tabel yang menggunakan atribut width pada tag th.
1 <!DOCTYPE html>
2 <html>
3 <head>
5 </head>
6 <body>
8 <table border="1" width="600px">
9 <caption>------------Lebar Tabel 600px--------------</caption>
10 <tr>
11 <th width="300px">Judul 1 (width=300px)</th>

14 </tr>
15 <tr>
19 </tr>
20 <tr>
25 </tr>
26 <tr>
30 </tr>
31 </table>
32 </body>
33 </html>
Seperti yang terlihat, bahwa lebar dari masing-masing kolom diset melalui nilai
atribut width.
Sebagai catatan, seandainya total lebar dari seluruh kolom (atribut width pada tag th)
melebihi lebar tabel (atribut width pada tag table), maka lebar masing-masing kolom akan
disesuaikan agar tidak melebihi lebar tabel. Sehingga untuk menghindari tampilan yang
tidak diinginkan, pastikan agar total lebar kolom tidak melebihi nilai width tabel.
Tutorial Tabel HTML Part 9: Cara Mengatur dan Mengubah Tinggi Tabel HTML (atribut
height)
26 Feb 14 | Andre | Tutorial HTML | No Comments
Jika pada tutorial sebelumnya kita mempelajari cara merubah lebar tabel HTML, kali ini kita
akan membahas cara merubah tinggi dari tabel HTML dengan atribut height.
Untuk keperluan yang lebih khusus, tinggi default tabel HTML dirasa tidak mencukupi, untuk
hal ini HTML menyediakan atribut height untuk mengatur tinggi tabel, dan juga mengatur
tinggi masing-masing baris.
Jika anda sudah mengenal CSS, disarankan menggunakan CSS untuk menggantikan
penggunaan atribut height ini.
Fungsi atribut height
Sama seperti atribut width, atribut height dapat digunakan di dalam tag table atau tag tr.
Jika digunakan di dalam tag table, maka nilai dari width akan dibagi secara merata kedalam
seluruh baris. Namun jika kita menginginkan merubah tinggi baris tabel secara individu,
tag width harus diletakkan pada setiap tag tr.
Berikut contoh penggunaan atribut height pada tag table:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Contoh pemakaian attribut height dalam Tabel HTML</title>
5 </head>
6 <body>
7 <h2>Belajar atribut height dalam Tabel HTML</h2>
8 <h3>Atribut height pada tag table</h3>
9 <table height="200px" border="1">
10 <caption>------------Tinggi Tabel 200px--------------</caption>
11 <tr>
12 <th>Judul 1</th>
13 <th>Judul 2</th>
14 <th>Judul 3</th>
15 </tr>
16 <tr>
20 </tr>
21 <tr>
25 </tr>
26 <tr>
30 </tr>
31 </table>
32 </body>
33 </html>
Pada contoh
kode HTML diatas saya menambahkan atribut height=200px pada tag table, sehingga web
browser membagi tinggi 200px itu kepada seluruh baris yang ada.
Untuk pengaturan tinggi kolom yang lebih spesifik, kita dapat mengatur tinggi masing-
masing baris dengan cara menempatkan atribut height pada setiap tag tr. Berikut contoh
penggunaan atribut height pada tag tr:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Contoh pemakaian attribut height dalam Tabel HTML</title>
5 </head>
6 <body>
7 <h2>Belajar atribut height dalam Tabel HTML</h2>
8 <h3>Atribut height pada tag tr</h3>

9 <table border="1" >
10 <caption>---Baris 1 = 20px, Baris 2 = 40px, Baris 3 = 60px--</caption>
11 <tr height="20px">
12 <th>Judul 1</th>
13 <th>Judul 2</th>
14 <th>Judul 3</th>
15 </tr>
20 </tr>
25 </tr>
30 </tr>
31 </table>
32 </body>
33 </html>
Seperti yang
terlihat, bahwa ketiga baris pada tabel diatas memiliki tinggi yang berbeda-beda, karena kita
menambahkan atribut height=20px pada baris pertama, height=40px pada baris kedua,
dan height=60px pada baris ketiga.
Sebagai catatan, seandainya total tinggi dari seluruh baris (atribut height pada tag tr)
melebihi tinggi tabel (atribut height pada tag table), maka atribut height pada tag tabel akan
diabaikan, dan tabel ditampilkan dengan ukuran height pada tag tr. Namun jika
ukuran height pada tag tabel melebihi total height dari tag tr, maka ukuran tabel akan
ditampilkan proporsional mengikuti height dari tabel.
Sehingga untuk menghindari tampilan yang tidak diinginkan, pastikan agar total tinggi baris
tidak melebihi nilai height tabel.

Bahasa

Tutorial Membuat Tabel Di HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tutorial Membuat Tabel Di HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Tutorial HTML Lanjutan: Tag dan Atribut untuk Pembuatan Tabel HTML

23 Feb 14 | Andre | Tutorial HTML | No Comments

05 May 13 | Andre | Tutorial HTML | 21 Comments

Atribut border dalam tabel HTML

4 <title>Penggunaan atribut border dalam Tabel</title>

7 <h3>Belajar atribut border dalam Tabel</h3>

10 <td>Baris 1, Kolom 1</td>

11 <td>Baris 1, Kolom 2</td>

12 <td>Baris 1, Kolom 3</td>

15 <td>Baris 2, Kolom 1</td>

16 <td>Baris 2, Kolom 2</td>

17 <td>Baris 2, Kolom 3</td>

24 <td>Baris 1, Kolom 1</td>

25 <td>Baris 1, Kolom 2</td>

26 <td>Baris 1, Kolom 3</td>

29 <td>Baris 2, Kolom 1</td>

30 <td>Baris 2, Kolom 2</td>

31 <td>Baris 2, Kolom 3</td>

Atribut cellpadding dalam tabel HTML

4 <title>Penggunaan atribut cellpadding dalam Tabel</title>

7 <h3>Belajar atribut cellpadding dalam Tabel</h3>

8 <table border="1" cellpadding="0">

10 <td>Baris 1, Kolom 1</td>

11 <td>Baris 1, Kolom 2</td>

12 <td>Baris 1, Kolom 3</td>

15 <td>Baris 2, Kolom 1</td>

16 <td>Baris 2, Kolom 2</td>

17 <td>Baris 2, Kolom 3</td>

22 <table border="1" cellpadding="7">

24 <td>Baris 1, Kolom 1</td>

25 <td>Baris 1, Kolom 2</td>

26 <td>Baris 1, Kolom 3</td>

29 <td>Baris 2, Kolom 1</td>

30 <td>Baris 2, Kolom 2</td>

31 <td>Baris 2, Kolom 3</td>

Atribut cellspacing dalam tabel HTML

4 <title>Penggunaan atribut cellspacing dalam Tabel</title>

7 <h3>Belajar atribut cellspacing dalam Tabel</h3>

8 <table border="1" cellspacing="0">

10 <td>Baris 1, Kolom 1</td>

11 <td>Baris 1, Kolom 2</td>

12 <td>Baris 1, Kolom 3</td>

15 <td>Baris 2, Kolom 1</td>

16 <td>Baris 2, Kolom 2</td>

17 <td>Baris 2, Kolom 3</td>

22 <table border="1" cellspacing="7">

24 <td>Baris 1, Kolom 1</td>

25 <td>Baris 1, Kolom 2</td>

26 <td>Baris 1, Kolom 3</td>

30 <td>Baris 2, Kolom 2</td>

31 <td>Baris 2, Kolom 3</td>

25 Nov 13 | Andre | Tutorial HTML | 4 Comments

Fungsi Atribut Rowspan and Colspan

4 <title>Contoh Penggunaan Atribut Colspan dan Rowspan Tag Tabel</title>

7 <h1>Contoh atribut colspan dan rowspan </h1>

11 <td>Baris 1, Kolom 2</td>

12 <td>Baris 1, Kolom 3</td>

15 <td>Baris 2, Kolom 1</td>

16 <td colspan="2" >Baris 2, Kolom 2 & 3</td>

19 <td rowspan="2"> Baris 3 & 4, Kolom 1</td>

20 <td> Baris 3, Kolom 2</td>

21 <td> Baris 3, Kolom 3</td>

24 <td> Baris 4, Kolom 2</td>