Things you want to know about websites

 

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.


Bookmark or Add to Favourites

Next:

Html Colors

Related:

Html-Images
Html-Entities

Link to this page :

Copy and paste the following code in an html document to link to this page,