HTML Table: Materi Table Tambahan

1. HTML Table - Adding a Border

  • Jika Anda tidak menentukan batas tabel, itu akan ditampilkan tanpa batas.
  • Batas ditetapkan menggunakan properti perbatasan CSS:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Result:

2. HTML Table - Collapsed Borders

  • Jika Anda ingin perbatasan runtuh menjadi satu perbatasan, tambahkan properti border-collapse CSS:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Result:

3. HTML Table - Adding Cell Padding

  • Sel padding menentukan ruang antara konten sel dan perbatasannya.
  • Jika Anda tidak menentukan padding, sel tabel akan ditampilkan tanpa padding.
  • Untuk mengatur padding, gunakan properti padding CSS:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<p>Try to change the padding to 5px.</p>

</body>
</html>

Result:

4. HTML Table - Left-align Headings

  • Secara default, judul tabel tebal dan terpusat.
  • Untuk mensejajarkan judul tabel dengan benar, gunakan properti text-align CSS:
<!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>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Result:

5. HTML Table - Adding Border Spacing

  • Border spacing menentukan ruang antar sel.
  • Untuk mengatur jarak spasi untuk tabel, gunakan properti border-spacing CSS:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    padding: 5px;
}
table {
    border-spacing: 15px;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<p>Try to change the border-spacing to 5px.</p>

</body>
</html>

Result:

6. HTML Table - Cells that Span Many Columns

  • Untuk membuat rentang sel lebih dari satu kolom, gunakan atribut colspan:
<!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 columns:</h2>
<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

</body>
</html>

Result:

6. HTML Table - Cells that Span Many Rows

  • Untuk membuat rentang sel lebih dari satu baris, gunakan atribut rowspan:
<!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>
<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

</body>
</html>

Result:

7. HTML Table - Adding a Caption

  • Untuk menambahkan judul ke sebuah tabel, gunakan tag <caption>:
<!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>

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

</body>
</html>

Result:

8. A Special Style for One Table

  • Untuk menentukan gaya khusus untuk tabel khusus, tambahkan atribut id ke tabel:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
table#t01 {
    width: 100%;
    background-color: #f1f1c1;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<br>

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Result:

<!DOCTYPE html>
<html>
<head>
<style>
table {
    width:100%;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    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>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<br>

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Result:

Ringkasan Bab

  • Gunakan elemen HTML <table> untuk menentukan tabel
  • Gunakan elemen HTML <tr> untuk menentukan baris tabel
  • Gunakan elemen HTML <td> untuk menentukan data tabel
  • Gunakan elemen HTML <th> untuk menentukan judul tabel
  • Gunakan elemen HTML <caption> untuk menentukan judul tabel
  • Gunakan properti border CSS untuk menentukan border
  • Gunakan properti border-collapse CSS untuk menutup batas sel
  • Gunakan properti padding CSS untuk menambahkan padding ke sel
  • Gunakan properti text-align CSS untuk menyelaraskan teks sel
  • Gunakan properti border-spacing CSS untuk mengatur jarak antar sel
  • Gunakan atribut colspan untuk membuat rentang sel banyak kolom
  • Gunakan atribut rowspan untuk membuat rentang sel banyak baris
  • Gunakan atribut id untuk mendefinisikan satu tabel secara unik

HTML Table Tags

  • <table> Mendefinisikan sebuah tabel
  • <th> Mendefinisikan sebuah sel header dalam sebuah tabel
  • <tr> Mendefinisikan sebuah baris dalam sebuah tabel
  • <td> Mendefinisikan sebuah sel dalam sebuah tabel
  • <caption> Mendefinisikan caption tabel
  • <colgroup> Menentukan sekelompok satu atau lebih kolom dalam tabel untuk pemformatan
  • <col> Menentukan properti kolom untuk setiap kolom dalam elemen <colgroup>
  • <thead> Mengelompokkan konten header dalam sebuah tabel
  • <tbody> Mengelompokkan konten tubuh dalam sebuah tabe
  • <tfoot> Mengelompokkan isi footer dalam sebuah tabel

results matching ""

    No results matching ""