VirtualMV/HTML/Basic/Tables

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
<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.