HTML Tutorial : Table

Now, we will learn about table in html. Yesterdey, we have learn about tags html and format html, do you still remember?

This section lists the tags often used with HTML tables: <table>, <tr>, and <td>.

<table>
The <table> tag specifies the presence of a table. This is very often used in conjunction with the <tr> and the <td> tags. The following attributes are commonly used to define the properties of this table:
width: This specifies the width of the table. Can be specified in pixels or in relative terms (for example, 100%).
border: This specifies whether the table will have a border. The number indicates the thickness of the border.
cellspacing: The amount spacing between the cell wall and the cell border. The area enclosed by the cell walls are the maximum amount of area that text can be displayed in a cell.
cellpadding: The amount padding between cells and the each cell wall in a table.
bgcolor: This specifies the background color for this table. The color value may be specified as the color name or the six-character color code.
<tr>
The <tr> tag specifies the presence of a row. The following attributes are commonly used to define the properties of this row:
bgcolor: This specifies the background color for this row. The color value may be specified as the color name or the six-character color code.
height: This specifies the height of the row.
rowspan: This specifies the number of rows this particular row occupies.

<td>
The <tr> tag specifies the presence of a column. Columns are specified within each row. The following attributes are commonly used to define the properties of this column:
valign:
width: This specifies the width of the column. Can be specified in pixels or in relative terms (for example, 50%).
bgcolor: This specifies the background color for this column. The color value may be specified as the color name or the six-character color code.
colspan: This specifies the number of columns this particular column occupies.
Example 1

HTML:
<table border=1>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>

Display:

Element 1	Element 2	Element 3
Element 4	Element 5	Element 6

Example 2

HTML:
<table border=1 width=500>
<tr><td width=200>Element 1</td><td width=150>Element 2</td><td width=150>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>

Display:

Element 1	Element 2	Element 3
Element 4	Element 5	Element 6

Example 3

HTML:
<table border=1 width=500>
<tr bgcolor=red><td width=200><b>Element 1</b></td><td width=150>Element 2</td><td width=150>Element 3</td></tr>
<tr><td bgcolor=55ff55>Element 4</td><td>Element 5</td><td><i>Element 6</i></td></tr>
</table>

Display:

Element 1	Element 2	Element 3
Element 4	Element 5	Element 6

Example 4

HTML:
<table border=1>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td colspan=2>Element 4</td><td>Element 5</td></tr>
</table>

Display:

Element 1	Element 2	Element 3
Element 4		Element 5

Example 5: cellspacing and cellpadding attributes.

HTML:
<table border=1 cellspacing=10 cellpadding=0>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>

Display:

Element 1	Element 2	Element 3
Element 4	Element 5	Element 6

Example 6: cellspacing and cellpadding attributes.

HTML:
<table border=1 cellspacing=0 cellpadding=10>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>

Display:

Element 1	Element 2	Element 3
Element 4	Element 5	Element 6

Example 7: cellspacing and cellpadding attributes.

HTML:
<table border=1 cellspacing=10 cellpadding=10>
<tr><td>Element 1</td><td>Element 2</td><td>Element 3</td></tr>
<tr><td>Element 4</td><td>Element 5</td><td>Element 6</td></tr>
</table>

Display:

Element 1	Element 2	Element 3
Element 4	Element 5	Element 6

Remember, we have three tutorial of HTML

Regards,