HTML table tag

HTML Elemen <table> adalah tag yang digunakan untuk menampilkan konten di halaman website. seperti tabel yang terlihat dalam koran, buku, majalah dan lain sebagainya. tabel terdiri dari kolom dan baris.

1. html tag <table> contoh

<!DOCTYPE html>
<html> 
<head>
<style>
h2,h3 {font-family: monospace, "roboto mono";}
</style>
</head>
<body>

<h2>Contoh: HTML elemen table default</h2>  <hr>
<h3>Daftar Kode Negara</h3>
<table border="1">
  <tr>
    <th>No</th>
    <th>Negara</th>
    <th>Ibu Kota</th>
    <th>Kode</th>
  </tr>
  <tr>
    <td>01</td>
    <td>Argentina</td>
    <td>Buenos Aires</td>
    <td>54</td>
  </tr>
  <tr>
    <td>02</td>
    <td>Brunei</td>
    <td>Bandar Seri Begawan</td>
    <td>673</td>
  </tr>
  <tr>
    <td>03</td>
    <td>China</td>
    <td>Beijing</td>
    <td>86</td>
  </tr>
  <tr>
    <td>04</td>
    <td>Denmark</td>
    <td>Kopenhagen</td>
    <td>45</td>
  </tr>
  <tr>
    <td>05</td>
    <td>Indonesia</td>
    <td>Jakarta</td>
    <td>62</td>
  </tr>
  <tr>
    <td>06</td>
    <td>Malaysia</td>
    <td>Kuala Lumpur</td>
    <td>60</td>
  </tr>
</table>

</body>
</html>

Cicagak Berbagi

2. html tag <table> dengan css

<!DOCTYPE html>
<html> 
<head>
<style>
h2,h3 {font-family: monospace, "roboto mono";}
table {
  font-family: monospace, "roboto mono";
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

th {
  border: 1px solid #dddddd;
  color: white;
  font-size:18px;
  text-align: left;
  padding: 8px;
  background-color: #454545;
}

tr:nth-child(even) {
  background-color: #eee;
}
</style>
</head>
<body>

<h2>Contoh: HTML elemen table dengan css</h2>  <hr>
<h3>Daftar Kode Negara</h3>
<table>
  <tr>
    <th>No</th>
    <th>Negara</th>
    <th>Ibu Kota</th>
    <th>Kode</th>
  </tr>
  <tr>
    <td>01</td>
    <td>Argentina</td>
    <td>Buenos Aires</td>
    <td>54</td>
  </tr>
  <tr>
    <td>02</td>
    <td>Brunei</td>
    <td>Bandar Seri Begawan</td>
    <td>673</td>
  </tr>
  <tr>
    <td>03</td>
    <td>China</td>
    <td>Beijing</td>
    <td>86</td>
  </tr>
  <tr>
    <td>04</td>
    <td>Denmark</td>
    <td>Kopenhagen</td>
    <td>45</td>
  </tr>
  <tr>
    <td>05</td>
    <td>Indonesia</td>
    <td>Jakarta</td>
    <td>62</td>
  </tr>
  <tr>
    <td>06</td>
    <td>Malaysia</td>
    <td>Kuala Lumpur</td>
    <td>60</td>
  </tr>
</table>

</body>
</html>

Cicagak Berbagi