HTML TABLE BASIC
Untuk mulai bikin tabel, anda harus menempatkan <tr>(table row) dan <td>(table data) diantara kode <table> dan kode </table> berikut.
Dan hasilnya, tabel akan menjadi seperti ini:
| Inilah tabel saya! |
Kok cuma gitu? Mana border/bingkainya? Don't worry be happy (kayak judul lagu saja). Tambahkan saja <table> tag, seperti ini:
Dan sekarang tabel akan punya border seperti ini :
| Ini baru benar-benar tabel! |
Anda dapat mempertebal border dengan merubah <table border="2">menjadi lebih besar. Jika anda mengeset border="0", you will have a table with no border around it.
Of course, you probably want the table to have more than one cell in it. To add another cell on the same line, just use the <td> tags again, like this:
Dan hasilnya seperti ini :
| Ini sebuah cell | Ini juga sebuah cell |
Well, what if you want to go to the next line, or in table terms, the next row? To do this, you use a new set of table row tags, <tr> and </tr>:
Now there are two rows, each with two cells:
| This is a cell | This is a cell |
| This is the new row | I'm on the new row, too! |
There are a couple of commands you can add to the <table> tag to get more spacing between cells. Here they are:
1. cellspacing=" "
Use this command to add more space around each cell. Place a number inside the quote marks.
2. cellpadding=" "
Use this command to add more space inside each cell. Place a number inside the quote marks.
I'll show you an example of both of these now. Let's say we added the cellspacing command to our last table, and set it to equal 12, like this:
<table border="2" cellspacing="12">
Now the table would look like this:
| This is a cell | This is a cell |
| This is the new row | I'm on the new row, too! |
Now, suppose we used the cellpadding command, and set it to 12, like this:
<table border="2" cellpadding="12">
Now the table looks like this:
| This is a cell | This is a cell |
| This is the new row | I'm on the new row, too! |
And of course, you can use both at once:
<table border="2" cellspacing="15" cellpadding="15">
And the result is :
| This is a cell | This is a cell |
| This is the new row | I'm on the new row, too! |
You can add just about anything you would like inside the cells. You can add links, images, headings, paragraphs and more.
To use a link inside a cell, just place the link tag inside your <td> tags, like this:
<td><a href="http://www.pageresource.com">My Favorite WebSite!</a></td>
Now you will have a link inside your cell:
| This is a cell | My Favorite WebSite! |
| This is the new row | I'm on the new row, too! |
To place an image inside a cell, you do the same thing with the image tag:
<td><img src="scare.jpg"/></td>
Sample image inside a table cell
| This is a cell |  | ;
| This is the new row | I'm on the new row, too! |
If you want table headings for listing data, you could use the <th></th> tags on the first row of the table rather than <td></td> tags:
Hasilnya seperti ini :
| Name | Favorite Color |
|---|---|
| John | Blue |
| James | Green |
You may have noticed that most everything is aligned to the left side of each cell. This is the default setting. In the next section we will cover how to change the alignment of your cell contents, make cells stretch across more than one column or row, define a table width, and change cell background colors.
So, let's move on to Tables 2: Alignment, Color, and More.
0 comments:
Post a Comment