Table

TML Tables

Attribute HTML pada pada Tag Tabel

Attribute	Value	Penjelasan
align	left center right	Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text
bgcolor	rgb(x,x,x) #xxxxxx colorname	Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table
border	1 ""	Specifies whether the table cells should have borders or not
cellpadding	pixels	Not supported in HTML5. Specifies the space between the cell wall and the cell content
cellspacing	pixels	Not supported in HTML5. Specifies the space between cells
frame	void above below hsides lhs rhs vsides box border	Not supported in HTML5. Specifies which parts of the outside borders that should be visible
rules	none groups rows cols all	Not supported in HTML5. Specifies which parts of the inside borders that should be visible
summary	text	Not supported in HTML5. Specifies a summary of the content of a table
width	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
abbr	text	Not supported in HTML5. Specifies an abbreviated version of the content in a cell
align	left right center justify char	Not supported in HTML5. Aligns the content in a cell
axis	category_name	Not supported in HTML5. Categorizes cells
bgcolor	rgb(x,x,x) #xxxxxx colorname	Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color of a cell
char	character	Not supported in HTML5. Aligns the content in a cell to a character
charoff	number	Not supported in HTML5. Sets the number of characters the content will be aligned from the character specified by the char attribute
colspan	number	Specifies the number of columns a cell should span
headers	header_id	Specifies one or more header cells a cell is related to
height	pixels %	Not supported in HTML5. Deprecated in HTML 4.01.  Sets the height of a cell
nowrap	nowrap	Not supported in HTML5. Deprecated in HTML 4.01.  Specifies that the content inside a cell should not wrap
rowspan	number	Sets the number of rows a cell should span
scope	col colgroup row rowgroup	Not supported in HTML5. Defines a way to associate header cells and data cells in a table
valign	top middle bottom baseline	Not supported in HTML5. Vertical aligns the content in a cell
width	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
align	right left center justify char	Not supported in HTML5. Aligns the content in a table row
bgcolor	rgb(x,x,x) #xxxxxx colorname	Not supported in HTML5. Deprecated in HTML 4.01. Specifies a background color for a table row
char	Character	Not supported in HTML5. Aligns the content in a table row to a character
charoff	Number	Not supported in HTML5. Sets the number of characters the content will be aligned from the character specified by the char attribute
valign	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.