Penulisan Tabel di HTML
| Atribut | Nilai | Keterangan |
|---|---|---|
| Align | left, right, center | Digunakan untuk perataan keseluruhan teks didalam tabel |
| bgcolor | rgb(x,x,x), #xxxxxx, namawarna | Digunakan untuk pemberian warna latar pada tabel |
| Border | 1, 0 | Untuk menampilkan garis tabel. |
| cellpading | Pixels | Digunakan untuk memberikan jarak antara sel. |
| cellspacing | Pixels | Digunakan untuk memberikan jarak antara sel dan tabel. |
| width | Pixels, % | Untuk menentukan lebar tabel. |
Untuk dapat membuat tabel di HTML menggunakan tag <table> dimana tag ini salah satu tag yang ditulis secara berpasangan yakni membutuhkan tag pembuka <table> dan penutup </table>, sedangkan untuk membuat baris di dalam tabel menggunakan tag <tr></tr> atau table row, dan untuk pembuatan kolom yaitu menggunakan tag </td></td> atau table data. Di samping itu beberap hal yang perlu diketahui yakni apa saja atribut-atribut yang dapat di gunakan pada tag table, berikut ini daftarnya.
Perlu pembaca ingat bahwa tabel di atas tidak sepenuhnya lengkap, pembaca dapat mencari referensi di website lain seperti w3schools dan lain-lain.
Salah satu cara atau format menampilkan informasi dalam web adalah dengan tabel.
Tabel terdiri dari 4 unsur utama:
1. Baris
2. Kolom
3. Sel
4. Garis
Salah satu cara atau format menampilkan informasi dalam web adalah dengan tabel.
Tabel terdiri dari 4 unsur utama:
1. Baris
2. Kolom
3. Sel
4. Garis
contoh membuat tabel pada HTML
<html>
<head>
<title>contoh tabel</title>
<body>
<h1><p style="color:Gold";> <font face="Chiller";> <font size="50";> <b> MIA AMELIA PUJI AGUSTINA</b></p><h1>
<table border="1">
<!--baris pertama terdiri dari 4 kolom-->
<tr>
<td><font face="Colonna MT";> <p style="color:MediumVioletRed";> <b>No.</b></p></td>
<td><font face="Colonna MT";> <p style="color:MediumVioletRed";> <b>Nama<b/></p></td>
<td><font face="Colonna MT";> <p style="color:MediumVioletRed";> <b>Barang Dipesan<b/></p></td>
<td><font face="Colonna MT";> <p style="color:MediumVioletRed";> <b>Jumlah Barang</b></p></td>
<td><font face="Colonna MT";> <p style="color:MediumVioletRed";> <b>Harga Barang</b></p></td>
<td><font face="Colonna MT";> <p style="color:MediumVioletRed";> <b>Jumlah</b></p></td>
</tr>
<!--baris kedua terdiri dari 4 kolom-->
<tr>
<td><font face="Lucida Calligraphy";> <p style="color:aqua";> <b> 1.</b></p></td>
<td><font face="Lucida Calligraphy";> <p style="color:aqua";> <b> Mia Amelia Puji Agustina</b><p/></td>
<td><font face="Lucida Calligraphy";> <p style="color:aqua";> <b> Pensil</b><p/></td>
<td><font face="Lucida Calligraphy";> <p style="color:aqua";> <b> 5</b></p></td>
<td><font face="Lucida Calligraphy";> <p style="color:aqua";> <b> Rp.2.000</b></p></td>
<td><font face="Lucida Calligraphy";> <p style="color:aqua";> <b> Rp.10.000</b></p></td>
</tr>
<!--baris ketiga terdiri dari 4 kolom-->
<tr>
<td><font face="Bradley Hand ITC";> <p style="color:LawnGreen";> <b> 2.</b></p></td>
<td><font face="Bradley Hand ITC";> <p style="color:LawnGreen";> <b> Jisska Rosa Pertiwi</b></p></td>
<td><font face="Bradley Hand ITC";> <p style="color:LawnGreen";> <b> Buku</b></p></td>
<td><font face="Bradley Hand ITC";> <p style="color:LawnGreen";> <b> 7</b></p></td>
<td><font face="Bradley Hand ITC";> <p style="color:LawnGreen";> <b> Rp.3.000</b></p></td>
<td><font face="Bradley Hand ITC";> <p style="color:LawnGreen";> <b> Rp.21.000</b></p></td>
</tr>
<!--baris keempat terdiri dari 4 kolom-->
<tr>
<td><font face="Harrington";> <p style="color:Navy";> <b> 3.</b></td>
<td><font face="Harrington";> <p style="color:Navy";> <b> Nola Amelia</b></td>
<td><font face="Harrington";> <p style="color:Navy";> <b> Bolpoin</b></td>
<td><font face="Harrington";> <p style="color:Navy";> <b> 7</b></td>
<td><font face="Harrington";> <p style="color:Navy";> <b> Rp.2.000</b></td>
<td><font face="Harrington";> <p style="color:Navy";> <b> Rp.14.000</b></td>
</tr>
<!--baris kelima terdiri dari 4 kolom-->
<tr>
<td><font face="Bradley Hand ITC";> <p style="color:Red";> <b> 4.</b></td>
<td><font face="Bradley Hand ITC";> <p style="color:Red";> <b> Nurul Rizki Amalia</b></td>
<td><font face="Bradley Hand ITC";> <p style="color:Red";> <b> Penghapus</b></td>
<td><font face="Bradley Hand ITC";> <p style="color:Red";> <b> 10</b></td>
<td><font face="Bradley Hand ITC";> <p style="color:Red";> <b> Rp.1.000</b></td>
<td><font face="Bradley Hand ITC";> <p style="color:Red";> <b> Rp.10.000</b></td>
</tr>
<!--baris keenam terdiri dari 4 kolom-->
<tr>
<td><font face="Harrington";> <p style="color:RebeccaPurple";> <b> 5.</b></td>
<td><font face="Harrington";> <p style="color:RebeccaPurple";> <b> Windy Saputri</b></td>
<td><font face="Harrington";> <p style="color:RebeccaPurple";> <b> Penggaris</b></td>
<td><font face="Harrington";> <p style="color:RebeccaPurple";> <b> 6</b></td>
<td><font face="Harrington";> <p style="color:RebeccaPurple";> <b> Rp.2.000</b></td>
<td><font face="Harrington";> <p style="color:RebeccaPurple";> <b> Rp.12.000</b></td>
</tr>
<tabel>
</body>
</head>
</html>
Hasilnya seperti di bawah ini:
Mohon maaf jika ada penulisan kata yang salah
Terima Kasih
Semoga Bermanfaat
