Membuat table di 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 .

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 

<table border="1px">

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 . 

Belum ada Komentar untuk "Membuat table di HTML"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel