HTML Table

Create A Website     SQL     Data Warehousing     CSS     PHP     HTML     Database Normalization


HTML Tutorial > HTML Tags > 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 <td> 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: This specifies how the text is vertically aligned inside the column. Common values include "top", "middle", and "bottom."
  • 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: HTML List




Copyright © 2017   1keydata.com   All Rights Reserved     Privacy Policy   About   Contact