HTML Tables

November 30, 2012

  HTML 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

Flowchart: Alternate Process: <table border="1"> <tr> <td>Cell A</td> <td>Cell B</td> </tr> </table>
 





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

Flowchart: Alternate Process: <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>
 








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.

Contoh penggunaan Thead:

Rounded Rectangle: <table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table>
 
















Share This Story

Tags:

You Might Also Like

0 komentar