TML Tables
Attribute HTML pada pada Tag Tabel
Attribute
|
Value
|
Penjelasan
|
|
left center right
|
Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text
|
|
rgb(x,x,x) #xxxxxx colorname
|
Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table
|
|
1 ""
|
Specifies whether the table cells should have borders or not
|
|
pixels
|
Not supported in HTML5. Specifies the space between the cell wall and the cell content
|
|
pixels
|
Not supported in HTML5. Specifies the space between cells
|
|
void above below hsides lhs rhs vsides box border
|
Not supported in HTML5. Specifies which parts of the outside borders that should be visible
|
|
none groups rows cols all
|
Not supported in HTML5. Specifies which parts of the inside borders that should be visible
|
|
text
|
Not supported in HTML5. Specifies a summary of the content of a table
|
|
pixels %
|
Not supported in HTML5. Specifies the width of a table
|
Table dapat Anda gunakan karena dapat menampilkan informasi dalam bentuk yang ringkas dan
mudah dibaca. Tag awal yang digunakan adalah <TABLE> dan tag penutupnya </TABLE>
Tag <TABLE> mewakili beberapa bagian penting :
• </CAPTION> digunakan untuk membentuk judul table. Judul table
akan terletak di luar table di bagian atas atau di bagian bawah.
• <TH>…</TH> digunakan untuk meletakkan judul table di bagian paling atas atau
bagian paling kiri dari table.
• <TD> …</TD> digunakan sebagai tempat menulis data atau informasi dalam table.
Table COLSPAN dan ROWSPAN
Atribut COLSPAN digunakan untuk menghubungkan beberapa kolom menjadi 1 kolom.
ROWSPAN digunakan untuk menghubungkan beberapa baris menjadi satu baris.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Tampilan HTML dalam browser sbb:
row 1, cell 1
|
row 1, cell 2
|
row 2, cell 1
|
row 2, cell 2
|
Menggunakan Colspan & Rowspan
<table border="1">
<tr>
<td colspan=”2”>Row 1 cell 1</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Tampilan HTML dalam browser sbb:
row 1, cell 1
|
row 2, cell 1
|
row 2, cell 2
|
HTML Table Headers
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Hasil kode diatas dalam tampilan browser sbb:
Header 1
|
Header 2
|
row 1, cell 1
|
row 1, cell 2
|
row 2, cell 1
|
row 2, cell 2
|
Menggunakan Tag <TD> pada HTML
Atribut yang digunakan pada tag TD adalah:
Attribute
|
Value
|
Description
|
|
text
|
Not supported in HTML5. Specifies an abbreviated version of the content in a cell
|
|
left right center justify char
|
Not supported in HTML5. Aligns the content in a cell
|
|
category_name
|
Not supported in HTML5. Categorizes cells
|
|
rgb(x,x,x) #xxxxxx colorname
|
Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color of a cell
|
|
character
|
Not supported in HTML5. Aligns the content in a cell to a character
|
|
number
|
Not supported in HTML5. Sets the number of characters the content will be aligned from the character specified by the char attribute
|
|
number
|
Specifies the number of columns a cell should span
|
|
header_id
|
Specifies one or more header cells a cell is related to
|
|
pixels %
|
Not supported in HTML5. Deprecated in HTML 4.01. Sets the height of a cell
|
|
nowrap
|
Not supported in HTML5. Deprecated in HTML 4.01. Specifies that the content inside a cell should not wrap
|
|
number
|
Sets the number of rows a cell should span
|
|
col colgroup row rowgroup
|
Not supported in HTML5. Defines a way to associate header cells and data cells in a table
|
|
top middle bottom baseline
|
Not supported in HTML5. Vertical aligns the content in a cell
|
|
pixels %
|
Not supported in HTML5. Deprecated in HTML 4.01. Specifies the width of a cell
|
HTML TR Tag
Attribute yang digunakan pada tag <TR>
Attribute
|
Value
|
Description
|
|
right left center justify char
|
Not supported in HTML5. Aligns the content in a table row
|
|
rgb(x,x,x) #xxxxxx colorname
|
Not supported in HTML5. Deprecated in HTML 4.01. Specifies a background color for a table row
|
|
Character
|
Not supported in HTML5. Aligns the content in a table row to a character
|
|
Number
|
Not supported in HTML5. Sets the number of characters the content will be aligned from the character specified by the char attribute
|
|
top middle bottom baseline
|
Not supported in HTML5. Vertical aligns the content in a table row
|
HTML Thead Tag
tag <thead> digunakan untuk konten grup header di tabel HTML.
Unsur <thead> digunakan dalam hubungannya dengan unsur-unsur <tbody> dan <tfoot> untuk menentukan setiap bagian dari tabel (header, body, footer).
Browser dapat menggunakan elemen-elemen untuk memungkinkan bergulir badan independen dari tabel header dan footer. Juga, ketika mencetak sebuah meja besar yang mencakup beberapa halaman, elemen-elemen ini dapat mengaktifkan header tabel dan footer yang akan dicetak di bagian atas dan bawah setiap halaman.
Tag <thead> harus digunakan dalam konteks berikut: Sebagai anak dari elemen table, setelah setiap <caption>, dan elemen <colgroup>, dan sebelum <tbody>, <tfoot>, dan <tr> elemen.