Tables
You can create tables in html by using <table> tag. The process goes something like this,
1. Type the <table> tag.
2. Now to create a row type <tr> tag.
3. Now create a column by typing <td>, then your content and then </td>. Type as many <td> elements as much columns you want to make.
4. Now to finish the row type </tr>.
5. Now to create a second row type <tr> and then repeat the process described in 3.
6. When you are done creating rows, type </table> tag to end the table.
Border attribute
The border attribute is to used to create a border around the table and its cells. The value of border attribute is its size in pixels.
Example
The following example illustrates how to make a table and give it a 1px width border.
<table border="1">
<tr>
<td> First row First column </td>
<td> First row Second column </td>
</tr>
<tr>
<td> Second row First column </td>
<td> Second row Second column </td>
</tr>
</table>
this results in,
| First row First column | First row Second column |
| Second row First column | Second row Second column |
Width attribute
Browsers automatically calculate your table's width but if you want to define a width explicitly you can use the width attribute. The width is in pixels.
Example
<table border="1" width="200">
Cell spacing and Cell padding attributes
Cell spacing allows you to add space between cells of the table.
Example
<table border="1" cellspacing="10">
<tr>
<td> First row First column </td>
<td> First row Second column </td>
</tr>
<tr>
<td> Second row First column </td>
<td> Second row Second column </td>
</tr>
</table>
gives you,
| First row First column | First row Second column |
| Second row First column | Second row Second column |
Cellpadding allows you to add space inside cells.
Example
Using the same example above but with cellpadding and no cellspcaing,
<table border="1" cellpadding="10">
we get,
| First row First column | First row Second column |
| Second row First column | Second row Second column |
You can see the difference between cellspacing and cellpadding easily.
Next:
Related:
Link to this page :
Copy and paste the following code in an html document to link to this page,