Tag yang digunakan :
<td> … </td> : membuat sebuah sel data
atribut : rowspan, colspan, width, height, align
Script Contoh HTML Table :
Kemudian copykan script tersebut ke dalam Notepad dengan nama table.html lalu jalankan file tersebut dengan webbrowser Sobat.
[ Read More ]
- <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.