TIPS MEMBUAT TABEL MEMAKAI HTML
Halo Semuanyaa!!
4. Contoh coding lainnya menggunakan Rowspan dan Colspan
Di sini, aku akan membagikan tips-tips mudah cara membuat tabel menggunakan html beserta pemakaian rowspan dan colspan.
Langung saja ke tips yang pertama.
1. Membuat Tabel menggunakan HTML
Membuat tabel di HTML cukup gampang. Tentunya setiap tabel itu akan memiliki baris (ke kanan) dan kolom (ke bawah). Nah, untuk membuat tabel kita akan memakai <table>. untuk baris nya kita memakai tag <tr>, dan untuk menginput data ke baris atau bisa dibilang untuk kolom kita menggunakan tag <td>.
Membuat tabel di HTML cukup gampang. Tentunya setiap tabel itu akan memiliki baris (ke kanan) dan kolom (ke bawah). Nah, untuk membuat tabel kita akan memakai <table>. untuk baris nya kita memakai tag <tr>, dan untuk menginput data ke baris atau bisa dibilang untuk kolom kita menggunakan tag <td>.
contoh coding dan hasilnya ada di bawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<title>TABEL MENGGUNAKAN HTML</title>
<style>
table {width: 30%;}
td {text-align: center;}
</style>
</head>
<body>
<table border="1">
<tr>
<td>baris ke-1, kolom ke-1</td>
<td>baris ke-1, kolom ke-2</td>
<td>baris ke-1, kolom ke-3</td>
</tr>
<tr>
<td>baris ke-2, kolom ke-1</td>
<td>baris ke-2, kolom ke-2</td>
<td>baris ke-2, kolom ke-3</td>
</tr>
</table>
</body>
</html>
2. Membuat Tabel Menggunakan Rowspan dan Colspan
Setelah tau pembuatan tabel, pastinya bisa langsung ke pembuatan tabel menggunakan rowspan dan colspan nihh. Nah, untuk Rowspan berarti menghilangkan/menyatukan tabel yang ada di kolom dan mengarah ke bawah. Jika Colspan, menghilangkan/menyatukan tabel yang ada di baris. Begini contoh coding dan hasilnyaa.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mengenal Tabel HTML</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2">Nama</th>
<th colspan="3">Nilai</th>
</tr>
<tr>
<th>Kimia</th>
<th>Fisika</th>
<th>Biologi</th>
</tr>
<tr>
<td>Robby</td>
<td>76</td>
<td>80</td>
<td>81</td>
</tr>
<tr>
<td>Rendi</td>
<td>84</td>
<td>70</td>
<td>75</td>
</tr>
<tr>
<td>Alfian</td>
<td>96</td>
<td>70</td>
<td>71</td>
</tr>
</table>
</body>
</html>
3. Contoh coding dan hasil dari pengabungan Rowspan dan Colspan
<!DOCTYPE html>
<html lang="en">
<head>
<title>Penggunaan Rowspan dan Colspan</title>
</head>
<body>
<table border="2">
<tr>
<th rowspan="2">No</th>
<th rowspan="2">Nama</th>
<th rowspan="2">Kelas</th>
<th colspan="4">Absensi</th>
</tr>
<tr>
<td>Hadir</td>
<td>Sakit</td>
<td>Izin</td>
</tr>
<tr>
<td>1.</td>
<td>Andi</td>
<td>XI RPL</td>
<td>30</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>2.</td>
<td>Budi</td>
<td>XI RPL</td>
<td>29</td>
<td>0</td>
<td>1</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Rowspan dan Colspan</title>
<style>
table {width: 40%;}
th { text-align: center;}
</style>
</head>
<body>
<h1 style="text-align: left;">RAPOT XI IPA</h1>
<table border="2">
<th rowspan="2">NO</th>
<th rowspan="2">NAMA</th>
<th colspan="4">NILAI</th>
<th rowspan="2">JMLH</th>
<tr>
<td style="text-align: center;">IPA</td>
<td style="text-align: center;">MTK</td>
<td style="text-align: center;">BINDO</td>
<td style="text-align: center;">BING</td>
</tr>
<tr>
<td>1.</td>
<td>Andi</td>
<td>85</td>
<td>82</td>
<td>87</td>
<td>90</td>
<td>344</td>
</tr>
<tr>
<td>2.</td>
<td>Suci</td>
<td>89</td>
<td>88</td>
<td>90</td>
<td>95</td>
<td>362</td>
</tr>
</table>
</body>
</html>
Komentar
Posting Komentar