An Introduction to tables

What is a table?

A table is a good way of displaying information, particularly numerial information. Tables are a very useful tool to grasp, they can be very useful in developing a webpage that looks good.

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A cell can contain everything that would normally go within the body tag, including tables.

<html>
<head>
<title>Deckleswood School</title>
</head>
<body>
<table border="1" >
<tr>
<td>This is example 1</td>
<td>This is example 2</td>
</tr>

</table>
</html>

The example to the left, shows the code required to make a table with one row and two columns as shown below.

This is example 1
This is example 2


If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.

Below shows the same table as above, however without the border attribute.

This is example 1
This is example 2

Formatting a table

It is possible to add colour to a table, either as we have learnt before by formatting the text, or by adding backgrounds to a cell, or if prefered the entire table. Howeer, when adding a background colour to the table and or cells, you should bear in mind that your text colour may need changing as it might not show up against your background.

<html>
<head>
<title>Deckleswood School</title>
</head>
<body>
<table bgcolor="#ff5100" >
<tr>
<td>Cell 1 </td>
<td>Cell 2 </td>
</tr>

</table>
</html>

The example to the left and below shows how to create a table with colour in it. You do not have to make the whole table change colour, for example if you want to change the colour of just one row, at the opening row tag you need to insert bgcolor="COLOUR".

Cell 1 Cell 2


 

 

Instead of putting a colour in the background of the table, you may wish to use an image. this is done very easily and in a similar way to how to add a coloured background to the table.

<body>
<table background="http://www.maniactive.com/backgrounds/growing-hearts.gif">
<tr>
<td> I Love you! </td>
</tr>

</table>
</html>

 

I Love You!

 

 

Merging Cells

It is possible to merge two or more cells together in a table. This caa be useful, however there are limitations to this, for example, you cannot merge a row together and then also merge a cell from the row above to the already merged cells, in other words you cannot jump rows, or columns. Below are examples of what may be done.

   
The middle cells have been merged
   

 
column merged
 
   
   

  Part of a row merged
part of a column merged        
       
       
       

To merge a cell, you use the terms either rowspan="" and colspan="". to create the merged table with the middle cells merged the following is used <td colspan="2">.

The <td> tag is altered to tell your browser that this cell is to "span 2" columns. No extra tags are needed. The table is then completed in the same way as normal.

To merge a colum together the tag is changed, you find change the tag from <td> to <tr> and instead of colspan it becomes rowspan=""

The number between the brackets, tells the browser how many cells to span. A table can contain many spans, you are not limited to one soan per table.

   

Alignments

Tables are aligned in much a similar way as standard text. When editing text to be aligned, the tag is <div align="center">, however when editing a cell or table, you simply ad the align="center" onto the end of the cell / table tag. For examples see below.

Text aligned left

This table has been aligned to the left. However this code can easily be adjusted to align "right", "center" The following is the code that would be used.

<body>
<table align="left">
<td>
<tr>
Text aligned left
</tr>
</td>
</table>
</body>

To align the cell vertically, the exact procedure is followed above, however it becomes valign="top" , center or bottom