logo blog

2016-12-01T21:53:00+07:00

Cara Membuat Tabel HTML CSS

tabel-html
Tabel merupakan kumpulan data informasi yang disusun saling berhubungan berdasarkan baris dan kolom dalam HTML yang ada di halaman web.  Artikel sebelumnya kita sudah belajar membahas Cara Membuat Tabel HTML di web. Pada kesembatan ini saya akan berbagi  tutorial Bagimana membuat tabel HTML dengan Style CSS. Di materi sebelumnya membuat tabel HTML tanpa CSS tentu masih kurang menarik untuk dilihat. Sekarang bagaimana membuat tabel HTML menarik dengan element CSS (style sheet).  Sebelum saya mulai saya jelaskan terlebih dahulu dibawah ini tag HTML dan elemen CSS untuk membuat tabel agar terlihat menarik.

Penjelasan Tag Tabel HTML

  • Tag <table> digunakan untuk memulai tabel
  • Tag <tr> adalah singkatan dari table row, digunakan untuk membuat baris dari tabel.
  • Tag <td> adalah singkatan dari table data, digunakan untuk menginput data ke tabel.
  • Tag  <thead> adalah tag yang digunakan untuk mengelompokkan header dan format konten sebagai kesatuan header (kepala) dari tabe
Untuk scriptnya bisa langsung lihat dibawah ini 

<html>
<head>
<title>Untitled Document</title>
 <style>
table {
 font-family: Tahoma; 
 font-size: 8pt;
 border-width: 1px;
 border-style: solid;
 border-color: #999999;
 border-collapse: collapse;
 margin: 5px 0px;
 margin-left:5px;
 margin-right:5px;
        margin-top:5px;
 margin-bottom:5px;
}
th{
 color: #FFFFFF;
 font-size: 7pt;
 text-transform: uppercase;
 text-align: center;
 padding: 0.5em;
 background:url(images/header-bg.gif); 
 border-width: 1px;
 border-style: solid;
 border-color: #969BA5;
 border-collapse: collapse;
 background-color: #265180;
}
td{
 padding: 0.5em;
 vertical-align: top;
 border-width: 1px;
 border-style: solid;
 border-color: #969BA5;
 border-collapse: collapse;
}
thead td {
 background-color: #E5E5E5; 
 padding: 5px 0 5px 0; text-transform: capitalize;
 text-align:center;

}
</style>
</head>
<body>
<h1>Gambar Tabel HTML Dengan CSS</h1>
<table width="600"><thead>
  <tr>
    <td colspan="3">header</td>
  </tr></thead> 
  <tr>
    <td> 5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>
</body>
</html>
Perhatikan script tabel css yang menarik diatas, Untuk penggunaan elemen css ada dibawah tag <head> dan diatas </head> berwarna merah. Dari element css diatas bisa anda kembangkan seperti background-color, border-color bisa anda rubah sesuai keinginan anda.

Demikian tutorial bagimana membuat tabel dengan css yang menarik untuk dilihat. Semoga ini bisa bermanfaat dan jika kurang jelas bisa comment dibawah ini.

2016-12-01T21:53:00+07:00

Categories :
Subscribe to this Blog via Email :
Author commando98

Author:

Dalam Bekerja Harus Menantang Menantang Itu Harus Menyenangkan

6 comments

Write comments

Florencia Ang
Admin

September 15, 2018 at 11:25 PM
Yuk join sekarang dan pasang taruhan mu hanya di www*updatebetting*co

Reply delete
avatar
Unknown
Admin

March 16, 2020 at 7:49 PM
Malam kak, terimakasih atas artikelnya, artikelnya membuat saya mengerti perintah2 html, dengan ini saya bisa belajar, walaupun saya kurang mengerti, tetapi dengan bantuin artikel kakak saya lebih mengerti sari sebelumnya, semangat kakak dalam pembuatan artkel2 yang lain, semoga kakak sehat selalu di murahkah rezekinya.
Perkenalkan nama saya Dela Novitasari dari kampus STMIK ATMA LUHUR PANGKALPINANG, web kampus saya https://www.atmaluhur.ac.id/

Reply delete
avatar
Elvin Abel
Admin

March 19, 2020 at 7:18 AM
Hy kak, artikel nya sangat bagus dan bermanfaat sekali, dan materi yang disampaikan juga mudah untuk di pahami. Semoga kedepan nya bisa membuat artikel yang lebih bagusnlagi kak.
Perkenalkan:
Nama : Elvin Abel
Nim :1922500134
Kelompok : SI2K
Link kampus https://www.atmaluhur.ac.id/

Reply delete
avatar
Anggita
Admin

April 29, 2021 at 10:31 PM
Malam kak nama saya Anggita Nim 2022500158.
Terimakasih atas artikelnya dengan ini saya bisa belajar html dan menambah ilmu pengetahuan dalam mempelajari html. Dan artikel nya juga bagus selamat berkarya kak ditunggu artikel selanjutnya. Saya mahasiswa isb atmaluhur kunjungi juga website kampus kami
https://www.atmaluhur.ac.id/

Reply delete
avatar