Posted by: kkpitriska | February 17, 2013

Membuat Tabel dengan HTML

Membuat Table dengan HTML

  • Membuat table

Tag <TABLE> digunaka untuk membuat table dalam document HTML , bagian pokok dari table adalah cell yang didefinisikan dengan menggunakan tag <TD>.

<html>

<head>

<title>Using Table</title>

</head>

<body>

<table border=”1″>

<td>Table dengan sigle cell</td>

</table>

</body>

</html>

anda bisa menambahkan beberapa cell untuk membuat satu baris cell.

<html>

<head>

<title>Using Table</title>

</head>

<body>

<table border=”1″>

<td>cell 1</td>

<td>cell 2</td>

<td>cell 3</td>

<td>cell 4</td>

</table>

</body>

</html>

berikutnya kalo anda ingin membuat beberapa baris cell dalam table gunakan tag <TR>.

<html>

<head>

<title>Using Table</title>

</head>

<body>

<table border=”1″>

<tr>

<td>cell 1a</td>

<td>cell 1b</td>

<td>cell 1c</td>

</tr>

<tr>

<td>cell 2a</td>

<td>cell 2b</td>

<td>cell 2c</td>

</tr>

</table>

</body>

</html>

anda juga bisa memberi caption pada table dengan menambahkan teg berikut:

<caption>Creating Table</caption>

di dalam table.

  • Menambahkan Heading cell

Untuk menambahkan heading pada table tambahkan tag berikut pada table yang sudah di buat.

<table border=”1″>

<caption>Creating Table</caption>

<tr>

<th>Header 1</th>

<th>Header 2</th>

<th>Header 3</th>

</tr>

  • Pemformatan table

Untuk memformat perataan text di dalam table anda bisa gunakan attribute Align dan Valign (vertical Alignment)

Attribute

Value

Align Center | justify | left | right
Valign BASELINE | TOP | BOTTOM | MIDDLE

<tr align=”center” valign=”baseline”>

<td>cell 1a</td>

<td>cell 1b</td>

<td>cell 1c</td>

</tr>

<tr align=”center” valign=”baseline”>

<td>cell 2a</td>

<td>cell 2b</td>

<td>cell 2c</td>

</tr>

Anda juga bisa menambahkan attribute cellspacing untuk memberi sepasi antar sel dan cellpadding untuk spasi dari border ke text dalam cell.

  • Merge cell

Tag <TD> memiliki atribut colspan untuk merge column dan rowspan untuk merge baris.

Contoh:

<html>

<head>

<title>Using Table</title>

</head>

<body>

<table bgcolor=”CCCCFF” width=”62%” border=”1″

cellpadding=”0″>

<tr>

<td colspan=”3″ align=”center”>Quarter 1</td>

<td colspan=”3″ align=”center”>Quarter 2</td>

</tr>

<tr align=”center”>

<td>Jan</td>

<td>Feb</td>

<td>Mar</td>

<td>Apr</td>

<td>May</td>

<td>Jun</td>

</tr>

<tr>

<td>100</td>

<td>5000</td>

<td>200</td>

<td>1500</td>

<td>2500</td>

<td>1750</td>

</tr>

<tr>

<td>290</td>

<td>5050</td>

<td>2300</td>

<td>100</td>

<td>270</td>

<td>300</td>

</tr>

</table>

</body>

</html>

9

contoh :

<html>

<head>

<title>Rowspan</title>

</head>

<body>

<table bgcolor=”lavender” width=”75%” border=”1″ cellpadding=”0″>

<tr>

<td></td>

<td></td>

<td>South</td>

<td>North</td>

</tr>

<tr>

<td rowspan=”3″>Quarter 1</td>

<td>Jan</td>

<td>1000</td>

<td>12000</td>

</tr>

<tr>

<td>Feb</td>

<td>12500</td>

<td>1345</td>

</tr>

<tr>

<td>Mar</td>

<td>78090</td>

<td>71080</td>

</tr>

</table>

</body>

</html>

10


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: