Membuat table di HTML
Di Posting Oleh : wandi
Kategori : HTML
Sekarang kali ini kita akan belajar cara membuat table di HTML . Di dalam sebuah table kita memiliki yang namanya baris dan kolom , tentu kawan kawan sudah pada mengetahuinya baris dan kolom .
Oke sekarang kita coba contohnya
<!doctype HTML>
<html>
<head>
<title>Membuat table </title>
</head>
<body>
<table border="1px">
<tr>
<th>no</th>
<th>nama</th>
<th>pangkat</th>
</tr>
<tr>
<td>1</td>
<td>Sasuke</td>
<td>Genin</td>
</tr>
<tr>
<td>2</td>
<td>Naruto</td>
<td>Genin</td>
</tr>
<tr>
<td>3</td>
<td>Sakura</td>
<td>Jonin</td>
</tr>
<tr>
<td>4</td>
<td>Kakashi</td>
<td>Jonin</td>
</tr>
</table>
</body>
</html>
<table border="1px">
Mau liat atau download source code aplikasi premium bisa disini.
Di Posting Oleh : wandi
Kategori : HTML
Table ini berguna salah satunya kita bisa membuat template dengan menggunakan table , tetapi mungkin sekarang sudah tidak ada lagi sebuah website yang templatenya table . Jadi untuk membuat template sekarang kita gunakan css dan html . Oke kembali lagi ke table . Untuk membuat table kita gunakan tag <table> dan untuk barisnya kita gunakan tag <tr> dan untuk kolomnya kita gunakan yang namanya tag <td> atau tag <th> . Biasanya tag <th> digunakan untuk membuat judul dari setiap kolomnya .
Untuk membuat table di html mudah sekali seperti hanya artikel sebelumnya membuat list di html .
Baca juga membuat list di HTML
Oke sekarang kita coba contohnya
<!doctype HTML>
<html>
<head>
<title>Membuat table </title>
</head>
<body>
<table border="1px">
<tr>
<th>no</th>
<th>nama</th>
<th>pangkat</th>
</tr>
<tr>
<td>1</td>
<td>Sasuke</td>
<td>Genin</td>
</tr>
<tr>
<td>2</td>
<td>Naruto</td>
<td>Genin</td>
</tr>
<tr>
<td>3</td>
<td>Sakura</td>
<td>Jonin</td>
</tr>
<tr>
<td>4</td>
<td>Kakashi</td>
<td>Jonin</td>
</tr>
</table>
</body>
</html>
Nulisanya banyak tapi tampilnya hanya sedikit , ya . ( derita )
kenapa kita di bagian
Kita pakai atribut border , karena jika tidak maka tidak akan terlihat bawah itu merupakan sebuah table .Kalo kita coba hapus border="1px" maka tidak akan tampil garsinya dan tidak terlihat bahwa itu adalah table .
Seperti hanya list , di table ini juga bisa ada table di dalam table . contohnya
<!doctype HTML>
<html>
<head>
<title>Membuat table </title>
</head>
<body>
<table border="1px">
<tr>
<th>no</th>
<th>nama</th>
<th>Nilai</th>
</tr>
<tr>
<td>1</td>
<td>Sasuke</td>
<td>
<table border="1px">
<tr>
<th>pelajaran</th>
<th>nilai</th>
</tr>
<tr>
<td>Jutsu</td>
<td>A</td>
</tr>
<tr>
<td>Taijutsu</td>
<td>A</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>2</td>
<td>Naruto</td>
<td>
<table border="1px">
<tr>
<th>pelajaran</th>
<th>nilai</th>
</tr>
<tr>
<td>Jutsu</td>
<td>C</td>
</tr>
<tr>
<td>Taijutsu</td>
<td>C</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>3</td>
<td>Sakura</td>
<td>
<table border="1px">
<tr>
<th>pelajaran</th>
<th>nilai</th>
</tr>
<tr>
<td>Jutsu</td>
<td>b</td>
</tr>
<tr>
<td>Taijutsu</td>
<td>A</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>4</td>
<td>Kakashi</td>
<td>
<table border="1px">
<tr>
<th>pelajaran</th>
<th>nilai</th>
</tr>
<tr>
<td>Jutsu</td>
<td>A</td>
</tr>
<tr>
<td>Taijutsu</td>
<td>A</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Maka hasilnya
Oke mungkin itu dia bagaimana cara membuat table di html . Seperti tadi saya bilang bahwa table ini agak mirip mirip sama list . Terima kasih telah berkenan membaca artikel ini . Sampai jumpa di artikel yang lainnya yang lebih menarik dan juga lebih bermanfaat .
Mau liat atau download source code aplikasi premium bisa disini.
0 Komentar