- <table> … </table> digunakan untuk menambahkan tabel pada halaman web
atribut : border, width, height, bgcolor, align, cellpadding, cellspacing- border : digunakan untuk membuat border pada table,
Contoh <table border="1">...</table> <!-- Memberikan border sebesar 1px --> - untuk border dapat menggunakan ukuran (1-9) atau (1px-nPx)
- width : digunakan untuk mengatur lebar table.
Contoh <table width="800px">...</table> <!-- Membuat lebar table menjadi 800px --> - height : digunakan untuk mengatur tinggi table.
Contoh <table height="100px">...</table> <!-- Membuat tinggi table mwnjadi 100px --> - bgcolor : digunakan untuk memberi warna background pada table.
Contoh <table bgcolor="green">...</table> <!-- Membuat background table berwarna hijau --> - untuk warna background bisa gunakan nama warna : red, green, blue, dll atau menggunakan warna Hexadecimal dari Photoshop, Coreldraw atau yang lainnya : #3f3f3f, #000000, #fff000, dll
- align : untuk mengatur letak table.
Contoh <table align="center">...</table> <!-- Membuat table berada di tengah --> - kita juga dapat gunakan left untuk di kiri, dan Right untuk di kanan
- cellpadding : digunakan untuk memberi jarak antara text dengan border.
Contoh <table cellpadding="10px">...</table> <!-- Memberikan jarak text ke border sebesar 10px --> - cellspacing : digunakan untuk memberi jarak antar cell.
Contoh <table cellspacing="10px">...</table> <!-- Memberi jarak antar cell sebesar 10px -->
- border : digunakan untuk membuat border pada table,
- <th> … </th> : membuat header tabel / judul kolom
atribut : rowspan, colspan, width, height, align - rowspan : untuk menggabungkan dua baris atau lebih menjadi satu.
Contoh <th rowspan="3">...</th> <!-- Menggabungkan 3 baris menjadi 1 --> - colspan : untuk menggabungkan dua kolom atau lebih menjadi satu.
Contoh <th colspan="2">...</th> <!-- Menggabungkan 2 kolom menjadi 1 --> - width : unutk mengatur lebar cell.
Contoh <th width="200px">...</th> <!-- Membuat lebar cell menjadi 200px --> - height : untuk mengatur tinggi cell.Contoh <th height="50px">...</th> <!-- Membuat tinggi cell menjadi 50px -->
- align : mengatur letak text pada cell.
Contoh <th align="center">...</th> <!-- Membuat text berada di tangah cell --> - kita juga dapat gunakan left untuk di kiri, dan Right untuk di kanan
<td> … </td> : membuat sebuah sel data
atribut : rowspan, colspan, width, height, align
- rowspan : untuk menggabungkan dua baris atau lebih menjadi satu.
Contoh <th rowspan="2">...</th> <!-- Menggabungkan 2 baris menjadi 1 --> - colspan : untuk menggabungkan dua kolom atau lebih menjadi satu.
Contoh <th colspan="3">...</th> <!-- Menggabungkan 3 kolom menjadi 1 --> - width : unutk mengatur lebar cell.
Contoh <th width="200px">...</th> <!-- Membuat lebar cell menjadi 200px --> - align : mengatur letak text pada cell.
Contoh <th align="center">...</th> <!-- Membuat text berada di tangah cell --> - kita juga dapat gunakan left untuk di kiri, dan Right untuk di kanan
Contoh HTML Tabel :
| No | Waktu | Senin | ||
|---|---|---|---|---|
| XI RPL 1 | XI RPL 2 | XI RPL 3 | ||
| 1 | 07.00-07.30 | RK3-A | OR1 | MAT |
| 2 | 07.30-08.30 | OR2 | ||
| 3 | 08.30-09.00 | ISTIRAHAT | ISTIRAHAT | ISTIRAHAT |
Script Contoh HTML Table :
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border=1>
<tr>
<th rowspan=2>No</th>
<th rowspan=2 align="center">Waktu</th>
<th colspan=3 align="center">Senin</th>
</tr>
<tr>
<th>XI RPL 1</th>
<th>XI RPL 2</th>
<th>XI RPL 3</th>
</tr>
<tr>
<td>1</td>
<td>07.00-07.30</td>
<td rowspan=2 align="center">RK3-A</td>
<td align="center">OR1</td>
<td rowspan=2 align="center">MAT</td>
</tr>
<tr>
<td>2</td>
<td>07.30-08.30</td>
<td align="center">OR2</td>
</tr>
<tr>
<td>3</td>
<td>08.30-09.00</td>
<td>ISTIRAHAT</td>
<td>ISTIRAHAT</td>
<td>ISTIRAHAT</td>
</tr>
</body>
</html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border=1>
<tr>
<th rowspan=2>No</th>
<th rowspan=2 align="center">Waktu</th>
<th colspan=3 align="center">Senin</th>
</tr>
<tr>
<th>XI RPL 1</th>
<th>XI RPL 2</th>
<th>XI RPL 3</th>
</tr>
<tr>
<td>1</td>
<td>07.00-07.30</td>
<td rowspan=2 align="center">RK3-A</td>
<td align="center">OR1</td>
<td rowspan=2 align="center">MAT</td>
</tr>
<tr>
<td>2</td>
<td>07.30-08.30</td>
<td align="center">OR2</td>
</tr>
<tr>
<td>3</td>
<td>08.30-09.00</td>
<td>ISTIRAHAT</td>
<td>ISTIRAHAT</td>
<td>ISTIRAHAT</td>
</tr>
</body>
</html>
Kemudian copykan script tersebut ke dalam Notepad dengan nama table.html lalu jalankan file tersebut dengan webbrowser Sobat.
Artikel yang sangat bermanfaat.
menarik..menarik...menarik..
semakin pusing semakin menarik...!!!
nice info gan..
byk yang posting gini tapi ga ada yang serumit ini...
Mantap
:)
kita juga punya nih artikel mengenai 'Tabel HTML', silahkan dikunjungi dan dibaca , berikut linknya
http://repository.gunadarma.ac.id/bitstream/123456789/7036/1/0000010372-_Jurnal_STIK_dty_20120710.pdf
terimakasih
semoga bermanfaat