Menurut Wikipedia, tabel adalah daftar . Tabel biasanya terdiri dari baris dan kolom (anak TK juga tau keles) hha okee lanjut. Adakalanya kita menulis sesuatu yang memerlukan tabel, misalnya ingin membuat sebuah daftar yang membutuhkan baris dan kolom (ya iyalah kembali lagi ke tabel). Jadi untuk merapikan tulisan selain menggunakan list (baca : cara membuat list pada website), bisa juga menggunakan tabel.
Jadi, Untuk mempermudah membaca daftar data-data , kita bisa menggunakan tabel . Nah, di bawah ada script html untuk membuat tabel , tapi, sebelum ke script, di baca dulu ketengannya tag-tag tabel seperti berikut :
- Tag <table> : Mendefinisikan sebuah tebel
- Tag <tr> : Mendefinisikan baris tabel
- Tag <th> : Mendefinisikan judul kolom
- Tag <td> : Mendefinisikan isi tiap kolom
Setelah membaca tag-tag di atas, coba pahami dengan script di bawah ini :
<html>
<head>
<title>HTML Tabel</title>
</head>
<body>
<table border="1">
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
<th>Kolom 3</th>
</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>
</table>
</body>
</html>
kemudian, bandingkan antara script dan juga hasilnya seperti gambar di bawah ini :
Langsung saja ke tag <table>...</table> nya
di dalam tag <table> ada tulisan border="1" , maksunya border adalah garis yang ada di tabel untuk memisahkan baris dan kolom.
pada codingan di atas, ada 3 buah <tr> </tr> bisa di simpulkan <tr> merupakan baris .
kemudian, ada juga <th>.. </th> yups, seperti di atas, <th> di gunakan untuk judul kolom
sedangkan <td>...</td> di gunakan untuk menambah kolom, seperti gambar di atas, tiap <tr> memiliki 3 <td> yang artinya tiap baris memiliki 3 kolom
Sekarang, apakah selalu bentuk tabel itu kayak gitu ? Untuk membuat sebuah tabel sesuai yang diinginkan artinya, kita perlu untuk belajar memodifikasinya.
Untuk modifikasi nih, biasanya yang di modifikasi adalah baris dan juga kolom.
2. Colspan .
Colspan di gunakan untuk memodifikasi kolom, seperti bikin Marge Cell kolom pada pada tabel.
script :
<html>
<head>
<title>HTML Tabel</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Kolom 1</th>
</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>
</table>
</body>
</html>
script di atas karena yang mau di jadikan sati adalah kolom nya, makan pada <th> </th> yang semula berjumlah tiga, di hapus 2, menjadi 1 buah <th> </th> kemudian diberikan colspan="3" agar satu kolom <th> </th> tersebut bisa lebar nya sama dengan tida kolom,
sedangkan bagian bawahnya <td> karena dia masih terdiri dari 3 kolom, maka jumlahnya tetap ada tiga.
2. RowspanRowspan di gunakan untuk memodifikasi baris, seperti bikin Marge Cell baris pada pada tabel.
script :gambar dan script :
<html>
<head>
<title>HTML Tabel</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Kolom 1</th>
</tr>
<tr>
<td rowspan="2">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>
</tr>
</table>
</body>
</html>
perhatikan yang ada tulisan rowspan 2 . karena baris nya ada dua yang bisa di satukan, maka rowspan 2, dan baris pada bari ke-2, <td> nya di hilangkan satu,
Tag :
HTML
2 Komentar untuk "Cara Simple Membuat dan Modifikasi Tabel pada Website dengan HTML"
Terima kasih ilmunya kak π.saya sebagai pemula terbantu untuk membuat tabel menggunakan html.untuk author semangat terus menulisnya π
Ardandysyah
1922500080
https://www.atmaluhur.ac.id/
Hard Rock Hotel Casino & Spa - MapYRO
Hard Rock κΉμ² μΆμ₯μλ§ Hotel & μ΅μ° μΆμ₯μλ§ Casino - MapYRO, Las μμ° μΆμ₯μλ§ Vegas. See all 2526 traveler reviews, 15 tips, and 0 μ€μ° μΆμ₯μλ§ candid photos from 1607 μΆμ² μΆμ₯λ§μ¬μ§ visitors to Hard Rock Hotel