HTML/XHTML:Table tag

From virtualMV2015wiki
Jump to: navigation, search
 Home  HTML/XHTML <

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;

<html> 
<head> 
<title>Table example</title>
</head> 
<body>
<table> 
  <tr><td>rent</td> <td>$300.00 </td></tr> 
  <tr><td>phone</td><td>$55.00  </td></tr> 
</table>
</body> 
</html>

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


rent $300.00
phone$55.00

Notes

The basic table tags are;

  • <table> and </table>
  • <tr> - </tr> : a table row.
  • <td> - </td> : the table data ( located in cells ).

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.

..
<table border = "10" height="150" width="200"> 
<tr><td>rent</td>
    <td>$300.00 </td></tr> 
<tr><td>phone</td>
    <td>$55.00 </td></tr> 
</table>
..

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

rent $300.00
phone $55.00

Notes

  • A border colour can be specified but only works with I.E.
    • E.g.: <table bordercolor = "#000000">
  • Table width and height can be specified as a percentage
    • E.g. <table width = "95%">

Heading tags

Two tags are used to provide captioning and column headings (<caption> and <th> Modify tbl.html to;

<html> 
<head> 
<title>Table example</title>
</head> 
<body>
<table border = 2> 
<caption>Expenses</caption>
<tr><th>Item</th>
    <th>$</th></tr>
<tr><td>rent</td>
    <td>$300.00 </td></tr> 
<tr><td>phone</td>
    <td>$55.00 </td></tr> 
</table>
</body> 
</html>

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

Expenses
Item $
rent $300.00
phone $55.00

Notes

The heading tags for a table are;

  • <caption> and </caption>
  • <th> ... </th> : the table heading data ( located at the top of the columns ).

Cell spacing and padding

Figure 1: Cell padding and spacing displayed

  • 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.
..
<table border = 2 cellspacing ="9" cellpadding="5" > 
<tr><td>rent</td>
    <td>$300.00 </td></tr> 
<tr><td>phone</td>
    <td>$55.00 </td></tr> 
</table>
..

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


rent $300.00
phone $55.00

Experiment with different settings.

Notes

Both these options are table container tags

  • e.g. <table border=1 cellspacing=0 cellpadding=0>
  • The default for padding is 1 spacing is 2

One pixel borders

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

<table style="border-collapse: collapse;" border="1" > 
<tr><td>rent</td>
    <td>$300.00 </td></tr> 
<tr><td>phone</td>
    <td>$55.00 </td></tr> 
</table>


rent$300.00
phone$55.00

Cell alignment tags

Modify tbl.html as;

..
<table border = "2" height="75" width="200"> 
<tr>
  <td valign="top"
    align="left">rent</td>
  <td valign="top"
    align="right">$300.00</td>
</tr> 
<tr>
  <td  valign="bottom"
    align="left">phone</td>
  <td valign="bottom"
    align="right">$55.00</td>
</tr> 
</table>
..

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

rent $300.00
phone $55.00

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

rent$300.00
phone$55.00

Notes

The alignment tags are container tags for the cell tags <td>;

  • Horizontal alignment
    <.. align = "left | center | right " ..>
  • Vertical alignment
    <.. valign = "top | bottom".. >.

Cells can also be allocated a fixed (pixel) or percentage width

  • <td width="100">
  • <td width="33%">

The default alignment is left, center

You can also include align and valign commands in the table row tag and in the table tag.

Including align=left or align=right in the table tag does NOT align the contents of the table. Instead it aligns the whole table on the page. i.e. it makes the text outside the table wrap around the table.

Cell spanning tags

Modify tbl_b.html as;

..
<center><table width="90%" border="1" cellspacing="0" cellpadding="10">
<tr>
  <td colspan="2" align="center">
  <p>Cell 1: this cell &quot;spans&quot; 2 columns</p>
  </td>
</tr>
<tr>
  <td align="center"><p>Cell 3</p>
  </td>
  <td align="center"><p>Cell 4</p>
  </td>
</tr>
</table></center>
..

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

Cell 1: this cell "spans" 2 columns

Cell 3

Cell 4

Cell background colours and images

create tbl_bkg.html as;

<center>
<table width="90%" border="1" cellspacing="0" cellpadding="10">
<tr>
<td style ="background-color:#FFF000">Yellow</td>
<td style ="background-color:#00FF00">Lime</td>
<td style ="background-color:#00FFFF">Aqua</td>
</tr>
<tr>
<td style ="background-color:#FF00FF">&nbsp;</td>
<td background = "mmedia/b_home.gif">***</td>
<td style ="background-color:#FF0000">&nbsp;</td>
</tr>
<tr>
<td style ="background-color:#0000FF">Blue</td>
<td style ="background-color:#008080">Teal</td>
<td style ="background-color:#800080">Purple</td>
</tr>
</table></center>

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

Yellow Lime Aqua
  ***  
Blue Teal Purple

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

Notes

Syntax:

  • <td style ="background-color:colour">
  • <tr style ="background-color:colour">
  • <table style ="background-color:colour">

where color is a colour name or hexadecimal code.

Note: table background colours only display in version 3 browsers and above, and they may not print correctly.

It is also possible to give a table cell (or a table row, or a table) a background image. Again these only display in version 3 browsers and above, and they may not print correctly.

The syntax is:

  • <td background="filename">
  • <tr background="filename">
  • <table background="filename">

where filename is the path and filename of the background image.

&nbsp; allows us to display a blank space on the screen. This was commonly used to space out text as early browsers ignored most spaces.

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

<div style="height:150px; overflow: auto;">

+Create a second table with the data +add

</div>

to end the division For example

<table><tr><th>Code</th><th>Country</th></tr></table>
<div style="height:100px; width:50%; overflow: auto;">
<table>
<tr><td>au</td><td>Australia</td></tr>
...
<tr><td>nz</td><td>New Zealand</td></tr>
...
</table>
</div>
CodeCountry
auAustralia
cnChina
jpJapan
nzNew Zealand
zaSouth Africa
twTaiwan

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

Creating buttons with common background images

<table width = "156" cellpadding = "0" cellspacing = "0" border = "0">
<tr align = "center"><td width = "156" height = "36" 
        STYLE="background-image : URL(mmedia/blankbutton.jpg); 
               background-repeat : no-repeat">
  <a href = "..link..">Button1</a>
</td></tr>
<tr align = "center"><td width = "156" height = "36" 
        STYLE="background-image : URL(mmedia/blankbutton.jpg); 
               background-repeat : no-repeat">
  <a href = "..link..">Button2</a>
</td></tr>
</table>

Where a background image of 156 x 36 is created.

<a href = "..link..">Button1</a>
<a href = "..link..">Button2</a>

XHTML - Example 1

<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>&nbsp;</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>
<COLGROUP><COLGROUP SPAN=3><COLGROUP SPAN=3><THEAD></THEAD><TBODY></TBODY>
CharacterEntityDecimalHexRendering in Your Browser
EntityDecimalHex
non-breaking space&nbsp;&#160;&#xA0;   
Ampersand&amp;&#38;&#x26;&&&

XHTML - Example 2

<table summary="This table lists program available at the university
                based on the discipline and the type of degree.">
  <caption>Programs available.</caption>
  <colgroup class="program-discipline">
  <colgroup class="program-type" span = 5>
  <thead>
     <tr>
       <th scope=col>Program</th>
       <th scope=col>Honors Co-op</th>
       <th scope=col>Honors Regular</th> 
       <th scope=col>General Regular</th> 
       <th scope=col>*Preprofessional or Professional</th>
     </tr>
  </thead>
  <tfoot class=footnote>
     <tr>
       <td colspan = 5>
          Many disciplines are also available as Minors and Joint
          Honors programs.
        </td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
         <td scope=row>ComputerScience</td>
          <td>yes</td>
          <td>yes</td>
          <td>no</td>
          <td>no</td>
      </tr>
      <tr>
         <td scope=row>Business Studies</td>
          <td>yes</td>
          <td>yes</td>
          <td>yes</td>
          <td>no</td>
      </tr>
  </tbody>
  </table>
<colgroup class="program-discipline"><colgroup class="program-type" span = 5><thead></thead><tfoot class=footnote> </tfoot> <tbody></tbody>
Programs available.
Program Honors Co-op Honors Regular General Regular *Preprofessional or Professional
Many disciplines are also available as Minors and Joint Honors programs.
ComputerScienceyes yesno no
Business Studiesyesyesyesno

Summary

<tbody> </tbody>
tag attributes used for
<table> Insert a table
cellpaddingcontrolling the space between the border and the content
cellspacing controlling the space between cells
background using a background image for the table
bgcolor using a background colour for the table
heightthe height of the table in pixels (as a number) or percent (e.g. 20%)
width the width of the table in pixels (as a number) or percent (e.g. 20%)
<th>Insert a table header
background using a background image for the table header
bgcolorusing a background colour for the table header
height controlling the height of the table header
widthcontrolling the width of the table header
align controlling the horizontal alignment of the table header
valign controlling the vertical alignment of the table header
<tr> inserting a table row
backgroundusing a background image for the table row
bgcolor using a background colour for the table row
height height of the table row
widthcontrolling the width of the table row
align horizontal alignment of the table row
valign vertical alignment of the table row
<td>inserting a table data cell
backgroundusing a background image for the table cell
bgcolor using a background colour for the table cell
height height of the table cell
width width of the table cell
align horizontal alignment of the table cell
valign vertical alignment of the table cell
<caption>inserting a table caption

Additional tags

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


Icon References.png References


HTML/XHTML:Table tag. (2017). In virtualMV's ( Michael Verhaart ) wiki. Retrieved December 14, 2017, from http://www.virtualmv.com/wiki/index.php?title=HTML/XHTML%3ATable_tag    (zotero)