HTML Tables

HTML Tables

Contoh Tabel  HTML :
CompanyContactCountry
FajarYusuf.ComFajar M. YusufIndonesia
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly

Mendefinisikan Table HTML

Tabel HTML didefinisikan dengan tag <table> .

Setiap baris tabel didefinisikan dengan tag <tr>. Sebuah header tabel didefinisikan dengan tag <th>. Secara default, judul tabel akan tebal dan posisi ditengah. Sebuah data / sel tabel didefinisikan dengan tag <td>.

Contoh :
<!DOCTYPE html>
<html>
<body>

<h2>Basic HTML Table</h2>

<table style="width:100%">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Kamu bisa mencoba disini, Hasil :
Mendefinisikan Table HTML
klik gambar untuk memperbesar

Catatan: <td> adalah elemen untuk wadah data tabel.
Mereka dapat berisi segala macam elemen HTML, termasuk teks, gambar, daftar, tabel lain, dll


HTML Table - Menambahkan Border atau Garis Tepi

Jika kamu tidak menentukan border untuk sebuah table, maka table akan ditampilkan tanpa border.

Sebuah border diatur dengan menggunakan CSS border properti:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<h2>Bordered Table</h2>
<p>Gunakan properti border CSS untuk menambahkan border ke tabel.</p>

<table style="width:100%">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Menambahkan Border atau Garis Tepi
klik gambar untuk memperbesar


Ingatlah untuk menentukan batas-batas untuk kedua tabel dan sel tabel.

HTML Table - Borders Runtuh Satu Garis

Jika kamu ingin border runtuh ke dalam satu border, tambahkan CSS border-collapse properti:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Collapsed Borders</h2>
<p>Jika kamu ingin border menjadi satu border satu garis solid, tambahkan properti CSS border-collapse.</p>

<table style="width:100%">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Borders Runtuh Satu Garis
klik gambar untuk memperbesar

HTML Table - Menambahkan Sel Padding

Sel Padding menentukan ruang antara isi sel dan border.

Jika kamu tidak menentukan padding, sel-sel tabel akan ditampilkan tanpa padding.

Untuk mengatur padding, gunakan CSS padding properti:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
}
</style>
</head>
<body>

<h2>Cellpadding</h2>
<p>Padding sel menentukan ruang antara konten sel dan batasnya.</p>

<table style="width:100%">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Menambahkan Sel Padding
klik gambar untuk memperbesar


HTML Table - Judul Tabel Rata Kiri

Secara default, judul tabel akan menjadi tebal dan rata tengah.

Untuk membuat rata kiri untuk judul tabel, gunakan CSS text-align properti:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
}
th {
  text-align: left;
}
</style>
</head>
<body>

<h2>Left-align Headings</h2>
<p>To left-align the table headings, use the CSS text-align property.</p>

<table style="width:100%">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Judul Tabel Rata Kiri
klik gambar untuk memperbesar


HTML Table - Menambahkan Spasi Border

Spasi perbatasan menentukan ruang antara sel-sel.

Untuk mengatur jarak perbatasan untuk tabel, gunakan CSS border-spacing properti:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  padding: 5px;
}
table {
  border-spacing: 15px;
}
</style>
</head>
<body>

<h2>Border Spacing</h2>
<p>Border spacing specifies menentukan ruang antara sel.</p>

<table style="width:100%">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Menambahkan Spasi Border
klik gambar untuk memperbesar

Catatan: Jika tabel telah menggunakan border-collapse, border-spacing tidak akan berpengaruh.

HTML Table - Sel Span Banyak Kolom

Untuk membuat rentang sel lebih dari satu kolom, gunakan colspan atribut:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>Sel yang menggabungkan dua kolom </h2>
<p>Untuk membuat rentang sel lebih dari satu kolom, gunakan atribut colspan. </p>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Good</td>
    <td>55577884</td>
    <td>55577885</td>
  </tr>
</table>

</body>
</html>
Hasil :
 HTML Table - Sel Span Banyak Kolom
klik gambar untuk memperbesar

HTML Table - Sel Span Banyak Baris

Untuk membuat rentang sel lebih dari satu baris, gunakan rowspan atribut:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>Cell that spans two rows</h2>
<p>Untuk membuat rentang sel lebih dari satu baris, gunakan atribut rowspan.</p>

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Good</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577884</td>
  </tr>
  <tr>
    <td>55577885</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Sel Span Banyak Baris
klik gambar untuk memperbesar

HTML Table - Menambahkan Caption

Untuk menambahkan keterangan pada tabel, gunakan tag <caption>:

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;
}
</style>
</head>
<body>

<h2>Table Caption</h2>
<p>Untuk menambahkan judul ke tabel, gunakan tag caption.</p>

<table style="width:100%">
  <caption>Saldo Bulanan</caption>
  <tr>
    <th>Bulan</th>
    <th>Saldo</th>
  </tr>
  <tr>
    <td>January</td>
    <td>Rp.100.000</td>
  </tr>
  <tr>
    <td>February</td>
    <td>Rp.500.000</td>
  </tr>
</table>

</body>
</html>
Hasil :
HTML Table - Menambahkan Caption
klik gambar untuk memperbesar

Catatan: Tag <caption> harus dimasukkan segera setelah tag <table>.

Sebuah Gaya Khusus untuk Table

Untuk menentukan gaya khusus untuk tabel khusus, menambahkan id atribut ke table :

Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
table {
  width:100%;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}
table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
 background-color: #fff;
}
table#t01 th {
  background-color: black;
  color: white;
}
</style>
</head>
<body>

<h2>Styling Tables</h2>

<table>
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>26</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>
<br>

<table id="t01">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th> 
    <th>Umur</th>
  </tr>
  <tr>
    <td>Fajar</td>
    <td>Yusuf</td>
    <td>26</td>
  </tr>
  <tr>
    <td>Ersya</td>
    <td>Aulia</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Nur</td>
    <td>Eka</td>
    <td>24</td>
  </tr>
</table>

</body>
</html>
Hasil :
Sebuah Gaya Khusus untuk Table
klik gambar untuk memperbesar


Ringkasan

Gunakan HTML elemen <table> untuk mendefinisikan tabel
Gunakan HTML elemen <tr> untuk menentukan baris tabel
Gunakan HTML elemen <td> untuk mendefinisikan tabel data
Gunakan HTML elemen <th> untuk menentukan meja pos
Gunakan HTML elemen <caption> untuk mendefinisikan judul tabel
Gunakan CSS border properti untuk menentukan garis tepi
Gunakan CSS border-collapse properti untuk runtuh garis tepi
Gunakan CSS padding properti untuk menambahkan padding untuk sel
Gunakan CSS text-align properti untuk menyelaraskan teks sel
Gunakan CSS border-spacing properti untuk mengatur jarak antara sel-sel
Gunakan colspan atribut untuk membuat rentang sel banyak kolom
Gunakan rowspan atribut untuk membuat rentang sel banyak baris
Gunakan id atribut untuk mendefinisikan unik satu tabel
Artikel Terkait:
Disqus Comments
FajarYusuf.Com - Situs Game Terbaik, Tips Game Terbaru, Juga Web Belajar Pemrograman,
FajarYusuf.Com adalah situs yang memberikan informasi seputar game terpopuler, terbaik dan terbaru. Dapatkan tips dan trik juga didalamnya, disamping itu terdapat juga materi pembelajaran pemrograman yang mudah diikuti dan berisi.
FajarYusuf.Com - Situs Game Terbaik, Tips Game Terbaru, Juga Web Belajar Pemrograman,
FajarYusuf.Com adalah situs yang memberikan informasi seputar game terpopuler, terbaik dan terbaru. Dapatkan tips dan trik juga didalamnya, disamping itu terdapat juga materi pembelajaran pemrograman yang mudah diikuti dan berisi.
FajarYusuf.Com - Situs Game Terbaik, Tips Game Terbaru, Juga Web Belajar Pemrograman,
FajarYusuf.Com adalah situs yang memberikan informasi seputar game terpopuler, terbaik dan terbaru. Dapatkan tips dan trik juga didalamnya, disamping itu terdapat juga materi pembelajaran pemrograman yang mudah diikuti dan berisi.