You are on page 1of 4

Setelah pada tutorial sebelumnya saya membahas tentang Order List dan Unorder List, kini saya akan

coba menjelaskan cara membuat tabel pada HTML. Apa fungsi tabel dalam html ? Tabel dalam html berfungsi untuk menampilkan data dalam bentuk grid, tabel juga biasanya dipergunakan untuk membuat layout suatu website meskipun di zaman sekarang website sudah tidak menggunakan tabel untuk layoutnya (tableless) dengan CSS. Tidak perlu berlama-lama langsung saja kita melihat tutorial cara membuat tabel pada html. Seperti biasanya Sobat Blogersalin script yang sudah saya buat ke dalam notepad++ ataupun bluefish editornya dan save dengan nama tabel.html pada komputer Sobat Bloger.
<table border='1px' width='300px'> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> <tr><td>5</td><td>6</td></tr> </table> align='center'

Sekarang buka file tabel.html dengan web browser dan lihat hasilnya. Jika Sobat Bloger mengikuti script yang saya buat, maka hasilnya akan seperti gambar 1.1.

Gambar 1.1

Saya rasa Sobat Bloger sudah menangkap cara membuat tabel bukan ? jika belum saya akan jelaskan bagian-bagianya. <table></table> Tag table dipergunakan untuk membuat table. Pada tag tersebut dapat disipkan attribut untuk table seperti yang saya lakukan pada script yang saya buat. Pada tag tabel tersebut saya sisipkan attribut border untuk garis tepi, align untuk posisi tabel dan width untuk ukuran dari tabel. 2. <tr></tr> Tag tr dipergunakan untuk membuat jumlah baris yang ingin ditampilkan dalam html. 3. <td></td> Tag td dipergunakan untuk membuat banyaknya kolom pada satu (1) row yang dibuat. Untuk membuat tabel seperti yang saya buat mungkin akan sangat mudah buat Sobat Bloger, namun bagaimana cara membuat tabel seperti gambar 1.2 1.

Gambar 1.2

Cara untuk membuat tabel pada gambar 1.2 sangat mudah, Sobat Bloger hanya perlu menambahkan attribut colspan, colspan berfungsi untuk menggabungkan kolom pada tabel. Jika Sobat Bloger perhatikan saya menggabungkan tabel pada kolom 5 dan 6. Untuk lebih jelasnya silahkan Sobat Bloger melihat script dibawa ini.
<table border='1px' align='center' width='300px'> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> <tr><td colspan='2'>5</td></tr> </table>

Saya rasa tutorial cara membuat website statis (part 5) sudah cukup jelas dan mudah. Semoga Sobat Bloger bisa menerapkannya.

You might also like