tutorial pengembangan web terbaru

Tabel HTML


Tabel Contoh HTML

Jumlah Nama depan Nama keluarga poin
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50

Mendefinisikan Tabel HTML

Contoh

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Cobalah sendiri "

Contoh menjelaskan:

Tabel didefinisikan dengan <table> tag.

Tabel dibagi menjadi baris tabel dengan <tr> tag.

Baris tabel dibagi menjadi data tabel dengan <td> tag.

Sebuah baris tabel juga dapat dibagi menjadi judul tabel dengan <th> tag.

Data tabel <td> adalah wadah data tabel.
Mereka dapat berisi segala macam elemen HTML seperti teks, gambar, daftar, tabel lain, dll


Sebuah Tabel HTML dengan Atribut Perbatasan

Jika Anda tidak menentukan perbatasan untuk meja, itu akan ditampilkan tanpa batas.

Sebuah perbatasan dapat ditambahkan dengan menggunakan border atribut:

Contoh

<table border="1" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Cobalah sendiri "

The border atribut pada jalan keluar dari standar HTML! Hal ini lebih baik menggunakan CSS.

Untuk menambahkan perbatasan, menggunakan properti perbatasan CSS:

Contoh

table, th, td {
    border: 1px solid black;
}
Cobalah sendiri "

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


Sebuah Tabel HTML dengan Borders diciutkan

Jika Anda ingin perbatasan runtuh ke dalam satu perbatasan, tambahkan CSS border-collapse :

Contoh

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
Cobalah sendiri "

Sebuah Tabel HTML dengan Sel Padding

Sel Padding menentukan ruang antara isi sel dan perbatasannya.

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

Untuk mengatur padding, gunakan CSS padding properti:

Contoh

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}
Cobalah sendiri "

HTML Tabel Pos

Judul tabel didefinisikan dengan <th> tag.

Secara default, semua browser utama menampilkan judul tabel sebagai berani dan berpusat:

Contoh

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Cobalah sendiri "

Untuk kiri menyelaraskan judul tabel, gunakan CSS text-align properti:

Contoh

th {
    text-align: left;
}
Cobalah sendiri "

Sebuah Tabel HTML dengan Spasi Perbatasan

spasi perbatasan menentukan ruang antara sel-sel.

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

Contoh

table {
    border-spacing: 5px;
}
Cobalah sendiri "

Jika tabel telah runtuh perbatasan, perbatasan-jarak tidak berpengaruh.


Tabel Sel yang SPAN Banyak Kolom

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

Contoh

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>
Cobalah sendiri "

Tabel Sel yang SPAN Banyak Baris

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

Contoh

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>
Cobalah sendiri "

Sebuah Table HTML Dengan Caption

Untuk menambahkan keterangan ke meja, gunakan <caption> tag:

Contoh

<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>
Cobalah sendiri "

The <caption> tag harus dimasukkan segera setelah <table> tag.


Sebuah Gaya Khusus untuk One Table

Untuk menentukan gaya khusus untuk meja khusus, menambahkan id atribut ke meja:

Contoh

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Sekarang Anda dapat menentukan gaya khusus untuk tabel ini:

table#t01 {
    width: 100%;
    background-color: #f1f1c1;
}
Cobalah sendiri "

Dan menambahkan lebih gaya:

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}
Cobalah sendiri "

Bab Ringkasan

  • Gunakan HTML <table> elemen untuk mendefinisikan tabel
  • Gunakan HTML <tr> elemen untuk menentukan baris tabel
  • Gunakan HTML <td> elemen untuk menentukan data tabel
  • Gunakan HTML <th> elemen untuk menentukan meja pos
  • Gunakan HTML <caption> elemen untuk mendefinisikan judul tabel
  • Gunakan CSS border properti untuk menentukan perbatasan
  • Gunakan CSS border-collapse properti runtuh batas sel
  • 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 meja

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 » Latihan 6»


HTML Table Tag

Menandai Deskripsi
<table> Mendefinisikan meja
<th> Mendefinisikan sel header tabel
<tr> Mendefinisikan baris dalam tabel
<td> Mendefinisikan sel di tabel
<caption> Mendefinisikan sebuah caption tabel
<colgroup> Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk memformat
<col> Menentukan sifat kolom untuk setiap kolom dalam <colgroup> elemen
<thead> Grup isi header dalam sebuah tabel
<tbody> Grup isi tubuh dalam sebuah tabel
<tfoot> Grup isi footer dalam sebuah tabel