HTML Tables Tutorials - Tables

Full Tutorial List           Tutorials (50)       Sept 01, 2009


In HTML tables are one of the most powerful formatting tools you can use.  You create tables using the table tag, in conjunction with the tr and td tags, so lets have a look at these tags.


<table>   </table> - This tag defines the table
<tr>   </tr> - This tag defines a row in the table (otherwise known as Table Row)
<td>   </td> - This tag defines a column in the table (otherwise known as Table Data)

The table data can contain text, images, paragraphs, almost anything.
A table is divided into rows with the <tr> tag, and each row is divided into data cells with the <td> tag.


Let's start by a two data cell table.

<table border="1">

<tr>

<td>First Table</td><td>Second Table</td>

</tr>

</table>

NOTE: Rows are horizontal lines of cells and Columns are vertical lines of cells

 
 
 

 Now let’s views what our table would look like in our browser, you will notice a border around our table, if we set this to “0” their would be no border, also we could of increased the border size by setting a size of 1,2,3,4,5 etc.




Table Headings

Table heading tags <th> ... </th> are used to designate a cell as a header. These tags should be used with in <tr> ... </tr>. By default, the content of the header row is center aligned and appears in bold face.

Table Headings Example:

<table border="1">

<th>My Table Heading</th>

<tr>

<td>First Table</td><td>Second Table</td>

</tr>

</table>

 
 


Output:



tables rowspan and colspan

Table cells can span across more than one column or row. The attributes COLSPAN ("how many across") and ROWSPAN ("how many down") indicate how many columns or rows a cell should take up.

Example:

<TABLE BORDER=2 CELLPADDING=4>
<TR>
<TH COLSPAN=1>Ford</TH> <TH COLSPAN=1>Engine Size</TH><TH COLSPAN=1>Fuel Type</TH>
</TR>

<TR> <TD>Focus</TD>  <TD>1493</TD> <TD>Petrol</TD> </TR>
<TR> <TD>Ka</TD>     <TD>3829</TD> <TD>Diesel</TD> </TR>
<TR> <TD>Mondeo</TD> <TD>0283</TD> <TD>Petrol</TD> </TR>

<TR> <TH COLSPAN=1>Sales</TH> <TH COLSPAN=1>Sales No:</TH>   </TR>
<TR> <TD>John White</TD>      <TD>20</TD> </TR>
<TR> <TD>Bruce Stephens</TD>  <TD>80</TD> </TR>
<TR> <TD>Sean Williams</TD>       <TD>50</TD> </TR>

</TABLE>

 

Output:

In the above example you can see clearly the benefits of using cols pan and row span with table headers.


Table Cell padding and Cell spacing

In html you can add space between each table cell. This is called cell spacing; it makes your content easier to read. You can also add space between the border of the cell and the cell's content. This is called cell padding

Cell spacing defines the amount of space between cells in your table by defining the pixel width between them (controls the thickness of the border in other words)..

Cellpadding - controls the amount of space between the contents of the cell (text, images, etc) from the cell wall (border).

The default for both properties is zero.

Example of a Cell Spacing -

< table border="1" cellspacing="5" >
< tr >
< td >some text< /td >
< td >some text< /td >
< /tr >< tr >
< td >some text< /td >
< td >some text< /td >
< /tr >
< /table >



It gives the following result -



Example of a Cell Padding -

< table border="1" cellpadding="10" >
< tr >
< td >some text< /td >
< td >some text< /td >
< /tr >< tr >
< td >some text< /td >
< td >some text< /td >
< /tr >
< /table >


It gives the following result -

Html Tables

That’s it on tables.


C++ Functions Tutorial