Tables

Here are some additional tags that can be used to create more sophisticated table layouts. They are structural markup tags.

• <frame="value"> It is possible to specify that certain parts of the external border be displayed. This involves an attribute called frame.
  Note: this attribute has nothing to do with frames and framesets

  The basic markup looks like this:

  <table border="#" frame="value">

  The frame attribute has eight values:

  • box This is the default value and places an external border on alll four sides of the table
  • void There are no external borders
  • above There is a single border at the top of the table
  • below There is a single border at the bottom of the table
  • hsides There are borders at the top and the bottom of the table
  • vsides There are borders at the left and right sides of the table
  • rhs There is a single border at the right side of the table
  • lhs There is a single border at the left side of the table

  Here is the markup for a 3X3 table with borders at the top and the bottom of the table

  <table border="4" bordercolor="#ff0000" frame="hsides">
  <tr>
      <td>Cell #1</td>
      <td>Cell #2</td>
      <td>Cell #3</td>
  </tr>
  <tr>
      <td>Cell #4</td>
      <td>Cell #5</td>
      <td>Cell #6</td>
  </tr>
  <tr>
      <td>Cell #7</td>
      <td>Cell #8</td>
      <td>Cell #9</td>
  </tr>
  </table>

  And here's the table:

  Cell #1	Cell #2	Cell #3
  Cell #4	Cell #5	Cell #6
  Cell #7	Cell #8	Cell #9

  Here's the table again with the value of the frame attribute changed from hsides to void

  Cell #1	Cell #2	Cell #3
  Cell #4	Cell #5	Cell #6
  Cell #7	Cell #8	Cell #9

  Note: This attribute does not work across all browsers. Be sure to check your page with different machines and browsers before going live with it.

• <rules="value"> The rule attribute allows you to specify whether internal borders are displayed.

  The basic markup looks like this:

  <table border="#" rules="value">

  The rules attribute has five values:

  • all This is the default value and displays all of the internal borders or horizontal rules of the table
  • none No internal borders are displayed
  • rows There are borders between all of the rows of the table
  • cols There are borders between all of the columns of the table
  • group There are borders for all of the groups defined for the table

  Here is the markup for a 3X3 table with borders at the top and the bottom of the table

  <table border="4" bordercolor="#ff0000" rules="cols">
  <tr>
      <td>Cell #1</td>
      <td>Cell #2</td>
      <td>Cell #3</td>
  </tr>
  <tr>
      <td>Cell #4</td>
      <td>Cell #5</td>
      <td>Cell #6</td>
  </tr>
  <tr>
      <td>Cell #7</td>
      <td>Cell #8</td>
      <td>Cell #9</td>
  </tr>
  </table>

  And here's the table:

  Cell #1	Cell #2	Cell #3
  Cell #4	Cell #5	Cell #6
  Cell #7	Cell #8	Cell #9

  Here's the table again with the value of the rules attribute changed from cols to none

  Cell #1	Cell #2	Cell #3
  Cell #4	Cell #5	Cell #6
  Cell #7	Cell #8	Cell #9

  Note: This attribute does not work across all browsers. Be sure to check your page with different machines and browsers before going live with it.

• <thead></thead> This paired tag defines a table row that appears at the top of the table.

  <tbody></tbody> This paired tag defines a table row that appears ar the top of the btable.

  <tfoot></tfoot> This paired tag defines a table row that appears at the bottom of the table.

  All three of these tags must have a <tr> paired tag enclosing the table cells in the row.

  These tags may also use attributes< for formatting that will be applied to the entire table row

  So, to have a table with a table header, a table body, and a table footer with the top and bottom rows different colors, you would use the following markup:

  <table border="2">
  <thead bgcolor="gray">
  <tr>
      <td colspan="2">Here is the <thead> content</td>
  </tr>
  </thead>
  <tbody>
  <tr>
      <td>Cell#1</td>
      <td>Cell#2</td>
  </tr>
  </tbody>
  <tfoot bgcolor="aqua">
  <tr>
      <td colspan="2">Here is the <tfooter> content</td>
  </tr>
  </tfoot>
  </table>

  The table would look like this:

  Here is the <thead> content
  Cell#1	Cell#2
  Here is the <tfooter> content

  Note that this structural markup is not supported by all browsers

• <colgroup>, </colgroup> This paired tag allows columns to be grouped together and formatting applied to all of the cells within the column groups

  <col> This unpaired tag is used to specify which columns will be affected by the formatting

  The <span> attribute is used with this tag to define the number of columns included in the grouping

  Here is a 3X3 table with a width of 40%. The first two columns are grouped together and have a gray background. The third column has a silver background.

  <table border="2" width="40%">
  <colgroup>
  <col span="2" bgcolor="gray" align="center" />
  <col bgcolor="silver" />
  </colgroup>
  <tr>
      <td>Cell#1</td>
      <td>Cell#2</td>
      <td>Cell#3</td>
  </tr>
  <tr>
      <td>Cell#4</td>
      <td>Cell#5</td>
      <td>Cell#6</td>
  </tr>
  <tr>
      <td>Cell#7</td>
      <td>Cell#8</td>
      <td>Cell#9</td>
  </tr>
  </table>
  

  It would look like this:

  Cell#1	Cell#2	Cell#3
  Cell#4	Cell#5	Cell#6
  Cell#7	Cell#8	Cell#9

  Note that this structural markup is not supported by all browsers

Enough! Let's try forms

---

Demo Page Navigation:	DemoPage contents	About HTML	UNIX help	HTML tags	Lists	Links	Images
	Imagemapping	Tables	Forms	Frames	Javascript	CSS (style sheets)	XML

---

Page by Howard Rosenbaum
Find me at hrosenba@indiana.edu	http://www.slis.indiana.edu/hrosenba/www/Demo/Demo4.html