HTML Codes Tutorial by Example


Introduction
HTML tags
Basic HTML tags
HTML format
HTML table
HTML list
HTML link
HTML image
HTML frame
Special chars
Tags and SEO
HTML commands
HTML Color
Site Map










Data Warehousing & Business Intelligence




















































































































HTML Table

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 1Element 2Element 3
Element 4Element 5Element 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 1Element 2Element 3
Element 4Element 5Element 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 1Element 2Element 3
Element 4Element 5Element 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 1Element 2Element 3
Element 4Element 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 1Element 2Element 3
Element 4Element 5Element 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 1Element 2Element 3
Element 4Element 5Element 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 1Element 2Element 3
Element 4Element 5Element 6


Next Section

Site Map   |   Links

1