Salah satu tampilan yang akn digunakan dalam halaman HTML adalah tabel. Tabel akan digunakan untuk halaman yang berisi informasi tertentu. Untuk itu sekiranya ini adalah salah satu basic dalam pembelajaran HTML.
Tag dasar dalam pembuatan tabel ini digunakan adalah <table>, <tr> dan <td>. Apa fungsi masing masing tag tersebut? Mari kiat lihat masing masing peran tag tersebut dalam pembuatan sebuah tabel.
Tag <table> dan tag penutupnya </table> digunakan sebagai perintah bahwasanya semua yang berada di antara dua tag tersebut adalah konten yang berupa tabel. Kemudian tag <tr> adalah sebagai penunjuk baris pada tabel. Tag <tr> akan ditutup dengan tag </tr>.
Tag <td> merupakan singkatan dari table data . Ini difungsikan untuk memasukkan data dalam tabel. Agar lebih memudahkan mari perhatikan script di bawah ini. Anda bisa copy dan menjalankan sendiri di teks editor dan browser anda.
Bagian <table> hingga </table> adalah isi dari tabel yang dibuat. Pada kode tersebut ditandai dengan warna biru. Kemudian untuk menyatakan sebuah baris bisa diawali dengan tag <tr> dan diakhiri dengan tag</tr>.
Di dalam tag <tr> dan </tr> ada tag <td> Tag <td> ini yang menyatakan kolom. Jika ingin menambahkan kolom dalam baris yang sama maka cukup ditambahkan element<td> dan <td/> setelah <td> dan <td/> yang pertama. Di atas terlihat jelas, masing masing kolom di isi dengan posisinya masing masing.
Tambahan, pada tag pembuka tabel <table border="3"> angka 3 tersebut menyatakan besarnya garis pembatas tabel dalam satuan pixel. Dengan demikian anda telah bisa membuat tabel pada sebuah halaman HTML.
Sedikit mengenai tabel ini pada tahun sebelum 2000-an, tabel ini digunakan untuk mengatur tampilan web. Namun seiring diimplementasikannya CSS maka sekarang tabel jarang digunakan untuk mengatur tampilan sebuah website, karena dianggap terlalu ribet dalam penulisannya.
Itulah catatan dari saya mengenai cara membuat tabel pada halaman HTML. Untuk lebih lengkap mengenai tutorial html bisa dilihat pada kotak navigasi. Pilih menu HTML, disana telah disusun tutoial HTML secara baik agar mudah dipelajari secara bertingkat.
Tag dasar dalam pembuatan tabel ini digunakan adalah <table>, <tr> dan <td>. Apa fungsi masing masing tag tersebut? Mari kiat lihat masing masing peran tag tersebut dalam pembuatan sebuah tabel.
Tag <table> dan tag penutupnya </table> digunakan sebagai perintah bahwasanya semua yang berada di antara dua tag tersebut adalah konten yang berupa tabel. Kemudian tag <tr> adalah sebagai penunjuk baris pada tabel. Tag <tr> akan ditutup dengan tag </tr>.
Tag <td> merupakan singkatan dari table data . Ini difungsikan untuk memasukkan data dalam tabel. Agar lebih memudahkan mari perhatikan script di bawah ini. Anda bisa copy dan menjalankan sendiri di teks editor dan browser anda.
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Tabel dengan HTML</title>
</head>
<body>
<h1> Tutorial Membuat Tabel pada HTML </h1>
<table border="3">
<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>
<tr>
<td> Baris 4, Kolom 1</td>
<td> Baris 4, Kolom 2</td>
<td> Baris 4, Kolom 3</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>Cara Membuat Tabel dengan HTML</title>
</head>
<body>
<h1> Tutorial Membuat Tabel pada HTML </h1>
<table border="3">
<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>
<tr>
<td> Baris 4, Kolom 1</td>
<td> Baris 4, Kolom 2</td>
<td> Baris 4, Kolom 3</td>
</tr>
</table>
</body>
</html>
Bagian <table> hingga </table> adalah isi dari tabel yang dibuat. Pada kode tersebut ditandai dengan warna biru. Kemudian untuk menyatakan sebuah baris bisa diawali dengan tag <tr> dan diakhiri dengan tag</tr>.
Di dalam tag <tr> dan </tr> ada tag <td> Tag <td> ini yang menyatakan kolom. Jika ingin menambahkan kolom dalam baris yang sama maka cukup ditambahkan element<td> dan <td/> setelah <td> dan <td/> yang pertama. Di atas terlihat jelas, masing masing kolom di isi dengan posisinya masing masing.
Tambahan, pada tag pembuka tabel <table border="3"> angka 3 tersebut menyatakan besarnya garis pembatas tabel dalam satuan pixel. Dengan demikian anda telah bisa membuat tabel pada sebuah halaman HTML.
Sedikit mengenai tabel ini pada tahun sebelum 2000-an, tabel ini digunakan untuk mengatur tampilan web. Namun seiring diimplementasikannya CSS maka sekarang tabel jarang digunakan untuk mengatur tampilan sebuah website, karena dianggap terlalu ribet dalam penulisannya.
Itulah catatan dari saya mengenai cara membuat tabel pada halaman HTML. Untuk lebih lengkap mengenai tutorial html bisa dilihat pada kotak navigasi. Pilih menu HTML, disana telah disusun tutoial HTML secara baik agar mudah dipelajari secara bertingkat.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment