Cara Membuat Colored Table Heading dengan W3.CSS

Kehidupan ini dipenuhi dengan seribu macam kemanisan, tetapi untuk mencapainya perlu seribu macam pengorbanan. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Colored Table Heading dengan W3.CSS.

Colored Table Heading adalah table yang pada kolom heading/judul table itu kita buat dia menjadi supaya ada warna nya.
Penampakannya seperti ini teman-teman:

Oke langsung saja, berikut Cara Membuat Colored Table Heading dengan W3.CSS.

Seperti biasa, siapkan file index.html nya terlebih dahulu.

Kemudian, isi di bagian <head> link untuk menghubungkan HTML kita dengan library CSS dari W3.CSS.

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

Setelah itu, isi di bagian <body> tag-tag seperti gambar di bawah.

<body class="w3-container">

<h2>Colored Table Heading</h2>
<p>Use any of the w3-color classes to add a color to the table.</p>

<table class="w3-table w3-striped w3-border">
<thead>
<tr class="w3-red">
  <th>First Name</th>
  <th>Last Name</th>
  <th>Points</th>
</tr>
</thead>
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
</tr>
<tr>
  <td>Adam</td>
  <td>Johnson</td>
  <td>67</td>
</tr>
</table>

</body>

Bagaimana teman-teman? Cukup mudah bukan?

Sekian untuk tutorial kali ini tentang Cara Membuat Colored Table Heading dengan W3.CSS.

Semoga bermanfaat, terima kasih

Cara Membuat Colored Table Heading dengan W3.CSS

Kategori