tutorial pengembangan web terbaru
 

HTML <table> Tag


Contoh

Sebuah tabel HTML sederhana, yang berisi dua kolom dan dua baris:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
Cobalah sendiri "

Lebih "Cobalah Sendiri" contoh di bawah ini.


Definisi dan Penggunaan

The <table> tag mendefinisikan sebuah tabel HTML.

Tabel HTML terdiri dari <table> elemen dan satu atau lebih <tr> , <th> , dan <td> elemen.

The <tr> elemen mendefinisikan baris tabel, yang <th> elemen mendefinisikan header tabel, dan <td> elemen mendefinisikan sel tabel.

Sebuah tabel HTML lebih kompleks juga dapat mencakup <caption>, <col>, <colgroup>, <thead>, <tfoot> , dan <tbody> elemen.


Dukungan Browser

Elemen
<table> iya nih iya nih iya nih iya nih iya nih

Perbedaan Antara HTML 4.01 dan HTML5

The "align", "bgcolor", "cellpadding", "cellspacing", "frame", "rules", "summary" , dan "width" atribut tidak didukung di HTML5.


atribut

Atribut Nilai Deskripsi
align left
center
right
Tidak didukung di HTML5.
Menentukan keselarasan dari meja sesuai dengan teks sekitarnya
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Tidak didukung di HTML5.
Menentukan warna latar belakang untuk tabel
border 1
0
Menentukan apakah atau tidak meja tersebut digunakan untuk tujuan tata letak
cellpadding pixels Tidak didukung di HTML5.
Menentukan ruang antara dinding sel dan isi sel
cellspacing pixels Tidak didukung di HTML5.
Menentukan ruang antara sel-sel
frame void
above
below
hsides
lhs
rhs
vsides
box
border
Tidak didukung di HTML5.
Menentukan bagian mana dari perbatasan luar yang harus terlihat
rules none
groups
rows
cols
all
Tidak didukung di HTML5.
Menentukan bagian mana dari dalam perbatasan yang harus terlihat
sortablesortable Menentukan bahwa tabel harus diurutkan
summary text Tidak didukung di HTML5.
Menentukan ringkasan isi tabel
width pixels
%
Tidak didukung di HTML5.
Menentukan lebar tabel

Atribut global

The <table> tag juga mendukung Atribut Global di HTML .


Atribut acara

The <table> tag juga mendukung Acara Atribut di HTML .


Coba Sendiri - Contoh

tabel header
Cara membuat tabel header.

Meja dengan keterangan
Tabel HTML dengan keterangan.

Tags dalam tabel
Bagaimana menampilkan elemen di dalam elemen lainnya.

Sel yang span lebih dari satu baris / kolom
Cara menentukan sel tabel yang mencakup lebih dari satu baris atau satu kolom.


Pages terkait

Tutorial HTML: Tabel HTML

Referensi HTML DOM: Table Object

CSS Tutorial: Styling Tabel


Pengaturan Default CSS

Kebanyakan browser akan menampilkan <table> elemen dengan nilai default berikut:

Contoh

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}
Cobalah sendiri "