Halo Sobat Blogger, kembali lagi ditutorial Belajar HTML dan CSS, disini kita akan coba membuat tabel yang nantinya akan ditampilkan pada halaman HTML. Pastikan sobat sudah membaca postingan Belajar HTML dan CSS (1) sebelumnya.
1. Pertama buka kembali file index.html dengan Notepad++ atau software lainnya, untuk yang belum memiliki file nya, buka postingan sebelumnya Belajar HTML dan CSS (1).
2. Sisipkan Script berikut ini diantara tag <body> dan </body>.
<table border='1'>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
- Untuk membuat tabel perintah/ tag yang digunakan adalah </table> dan jangan lupa menutupnya dengan perintah </table>.
- Script "table border='1'" memiliki arti tabel yang akan kita buat menggunakan border/ bingkai berukuran 1 Pixel, penulisan ukuran pada script HTML bisa di tulis '1' dan bisa juga '1px'. Tebal border dapat diganti sesuai kebutuhan.
- 3 Pasang Tag <tr> dan </tr> memiliki arti, tabel yang akan dibuat terdiri dari 3 baris.
3. Save dokumen index.html, dan coba buka filenya pada web browser, maka tabel tidak muncul pada halaman HTML. Hal ini disebabkan kita belum meletakkan data apapun pada tabel tersebut. Lanjut, sekarang sisipkan script berikut ini diantara 3 Tag <tr> dan </tr>.
<tr>
<td>Baris 1 Kolom 1</td><td>Baris 1 Kolom 2</td>
<td>Baris 1 Kolom 3</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
<td>Baris 2 Kolom 3</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
<td>Baris 3 Kolom 3</td>
</tr>
Tampilan Pada Web Browser :
Penjelasan :
- Tag <td> dan </td> memiliki arti tabel data, yaitu setiap perintah/ code yang kita tuliskan diantara Tag <td> dan </td> akan masuk kedalam elemen tabel. Untuk menambah tabel data cukup dengan menambahkan Tag <td> dan </td> sebanyak yang dibutuhkan.
Demikian tutorial membuat tabel pada halaman HTML, untuk tutorial berikutnya klik Tutorial Colspan & Rowspan Tabel HTML (3).
Demikian tutorial membuat tabel pada halaman HTML, untuk tutorial berikutnya klik Tutorial Colspan & Rowspan Tabel HTML (3).
Tidak ada komentar:
Posting Komentar