Belajar Membuat Table Span
Table Colspan dan rowspan adalah html attribute yang digunakan untuk memperlebar atau menggabungkan beberapa kolom atau row menjadi satu, sehingga satu unit kolom atau row ini menjadi lebih lebar.
Colspan adalah kependekan dari “column span” yang bisa mengartikan sebagai “berapa kotak kesamping”
sedangkan rowspan mengartikan “berapa kotak kebawah”.
Fungsi Atribut Colspan pada Table HTML
Atribut colpsan pada pembuatan table html, merupakan singkatan dari "column span" yang berfungsi untuk menggabungkan column. Penggunaan atribut colspan dapat diletakkan dalam tag <th> maupun tag <td>, tergantung kebutuhan tabel yang akan dibuat.
Fungsi Atribut Rowspan pada Table HTML
Atribut rowspan berfungsi untuk menggabungkan beberapa baris menjadi satu baris. Penggunaan atribut rowspan hanya dimungkinkan pada tag <td> saja, berbeda dengan colspan.
contoh kode html table span:
<html>
<head>
<title>Daftar Nilai</title>
</head>
<body>
<h2>Daftar Nilai Siswa</h2>
<table border="1">
<tr>
<td rowspan="2">Nama Siswa</td>
<td colspan="4">Nilai Mata Pelajaran</td>
</tr>
<tr>
<td>B. Indonesia</td>
<td>B. Inggris</td>
<td>Matematika</td>
<td>Kejuruan</td>
</tr>
<tr>
<td>Attharizky</td>
<td>85</td>
<td>89</td>
<td>79</td>
<td>90</td>
</tr>
</table>
</body>
</html>
Dari kode HTML diatas maka tampilan di browser akan nampak seperti dibawah ini.
<html>
<head>
<title>Daftar Nilai</title>
</head>
<body>
<h2>Daftar Nilai Siswa</h2>
<table border="1">
<tr>
<td rowspan="2">Nama Siswa</td>
<td colspan="4">Nilai Mata Pelajaran</td>
</tr>
<tr>
<td>B. Indonesia</td>
<td>B. Inggris</td>
<td>Matematika</td>
<td>Kejuruan</td>
</tr>
<tr>
<td>Attharizky</td>
<td>85</td>
<td>89</td>
<td>79</td>
<td>90</td>
</tr>
</table>
</body>
</html>
<head>
<title>Daftar Nilai</title>
</head>
<body>
<h2>Daftar Nilai Siswa</h2>
<table border="1">
<tr>
<td rowspan="2">Nama Siswa</td>
<td colspan="4">Nilai Mata Pelajaran</td>
</tr>
<tr>
<td>B. Indonesia</td>
<td>B. Inggris</td>
<td>Matematika</td>
<td>Kejuruan</td>
</tr>
<tr>
<td>Attharizky</td>
<td>85</td>
<td>89</td>
<td>79</td>
<td>90</td>
</tr>
</table>
</body>
</html>
Dari kode HTML diatas maka tampilan di browser akan nampak seperti dibawah ini.
Tidak ada komentar:
Posting Komentar