HTML/XHTML:Table tag

Learning objectives - HTML Tables

 * To demonstrate the following Table features in HTML (XHTML)
 * create a table,
 * control table borders, cell spacing and cell padding,
 * control the size of table cells, rows and tables,
 * use table captions and headers,
 * align the contents of table cells and rows,
 * change the background colour of table cells, rows and tables,
 * add a background image to table cells, rows and tables,
 * make one cell span across 2 or more rows or columns.

Use
The table tag should be used to display tabular data, rather than as a layout technique, though there are many web sites that do. Layout should be achieved via the Div tag and Cascading Style Sheets.

Pros

 * Search-able by all search engines without causing confusion
 * Only one page needs to be downloaded
 * Can be used to create separate sections on a page
 * Very easy to create a page layout

The cons…

 * The whole table needs to be downloaded leading to slower downloading
 * If used for navigation - as opposed to frames - links need to appear on all pages so pages tend to be larger
 * Tags can be messed up in different browsers
 * A large static site can be difficult to maintain if there are lots of links on each page

Basic table
Web pages are not just a series of media elements listed one after another. Text may be laid out in columns (as in this page), graphics are placed beside text, and so forth. An easy way to accomplish this is through the use of tables, although the XHTML 4 spectifications discourage the use of tables for layout purposes as they are difficult to translate for different devices. Create tbl.html as; 

Save then viewing in the web browser this should look something like;



Table container tags
The table tag can be modified with container tags. Note that these tags will apply to the whole table.

To add a border to the table and to fix the size of the table add the following "table" container tags.  .. Save then viewing in the web browser this should look something like; 

Heading tags
Two tags are used to provide captioning and column headings (&lt;caption> and &lt;th> Modify tbl.html to;  Save then viewing in the web browser this should look something like 

Cell spacing and padding



 * Cell Spacing is the number of pixels between the table cells.
 * Cell Padding is the pixel space inside the cells. i.e. the distance between the information and the sides of the table cells.

Save then viewing in the web browser this should look something like;

Experiment with different settings.

One pixel borders
We can use a combination of the style tag and the border tag as follows

Cell alignment tags
Modify tbl.html as;  .. Save then viewing in the web browser this should look something like; 

As a second task try to align all cells in the center of the table 

Cell spanning tags
Modify tbl_b.html as;  .. Save then viewing in the web browser this should look something like; 

Cell background colours and images
create tbl_bkg.html as; 

Save then viewing in the web browser this should look something like; 

Notice the *** on top of the tiling home images.

Div tag and tables
The division tag (div) can be used to create scrolling tables in a web page. example. +Create a table of headings +add  +Create a second table with the data +add  to end the division For example 

If you want both vertical and horizontal scroll bars use overflow: scroll;

Creating buttons with common background images
<div style="border: 1px solid #808080; width: 80%; margin-right:auto;margin-left:auto; background-color: #FBFFFF;font-size: larger;"> Where a background image of 156 x 36 is created.

XHTML - Example 1
<div style="border: 1px solid #808080; width: 80%; margin-right:auto;margin-left:auto; background-color: #FBFFFF;font-size: larger;">

<TABLE SUMMARY="This table gives the character entity reference,decimal character reference, and hexadecimal character reference for 8-bit Latin-1 characters, as well as the rendering of each in your browser."><COLGROUP><COLGROUP SPAN=3><COLGROUP SPAN=3><THEAD><TR><TH SCOPE=col ROWSPAN=2>Character</TH><TH SCOPE=col ROWSPAN=2>Entity</TH><TH SCOPE=col ROWSPAN=2>Decimal</TH><TH SCOPE=col ROWSPAN=2>Hex</TH><TH SCOPE=colgroup COLSPAN=3>Rendering in Your Browser</TH></TR><TR><TH SCOPE=col>Entity</TH><TH SCOPE=col>Decimal</TH><TH SCOPE=col>Hex</TH></TR></THEAD><TBODY><TR><TD SCOPE=row>non-breaking space</TD><TD>&amp;nbsp;</TD><TD>&amp;#160;</TD><TD>&amp;#xA0;</TD><TD> </TD><TD>&#160;</TD><TD>&#xA0;</TD></TR><TR><TD SCOPE=row>Ampersand</TD><TD>&amp;amp;</TD><TD>&amp;#38;</TD><TD>&amp;#x26;</TD><TD>&amp;</TD><TD>&#38;</TD><TD>&#x26;</TD></TR></TBODY></TABLE>

XHTML - Example 2
<div style="border: 1px solid #808080; width: 80%; margin-right:auto;margin-left:auto; background-color: #FBFFFF;font-size: larger;">

Summary
<tr bgColor="#dff1f4" vAlign="top"> <font face="Arial, Helvetica, sans-serif" size="-1">&lt;th&gt; <td width="296" colspan="2">Insert a table header    <td valign="top" width="74"><font face="Arial, Helvetica, sans-serif" size="-1">&lt;tr&gt; <td colspan="2" width="274">inserting a table row  <tr bgColor="#dff1f4" vAlign="top"> <font face="Arial, Helvetica, sans-serif" size="-1">&lt;td&gt; <td colspan="2" width="274">inserting a  table data cell   <tr  vAlign="top"> <font face="Arial, Helvetica, sans-serif" size="-1">&lt;caption&gt; <td colspan="2" width="274">inserting a table caption

Additional tags

 * &amp;nbsp;
 * Allows us to force a space or spaces at the start of a in a string of text.
 * &amp;quot;
 * Allows us to display a quote on the screen as " is used in the html code to terminate a string.