HTML TUTORIAL PART 9: EXPLANATION OF TABLES AND STYLES TAG

The HTML table tag inserts a table in the document. This tag is the container for all the parts of tables: captions (HTML caption tag), headers (HTML thead tag), header's cells (HTML th tag), footers (HTML tfoot tag), body (HTML tbody tag), rows (HTML tr tag), column attributes (HTML col tag), column groups (HTML colgroup tag), cells (HTML td tag).

USAGE EXAMPLE:

Code:

<table border="1">
  <tr>
    <th>Employee ID</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>0001</td>
    <td>Arvind</td>
    </tr>
    <td>0002</td>
    <td>Mahesh</td>
    </tr>
    <td>0003</td>
    <td>Shankar</td>
  </tr>
</table>

The HTML th tag defines a table's cell (HTML table tag) containing header information for other regular cells (HTML td tag).

The HTML tr tag defines rows in a table (HTML table tag). These rows act as containers for cells (HTML td tag and HTML th tag).

The HTML td tag defines a regular cell in a table (HTML table tag).




The HTML caption tag gives a title for the table where it's declared. It must be defined right after the starting HTML table tag and should declare the nature of the table.

USAGE EXAMPLE:

Code:

<table border="1">
  <caption>EMPLOYEE INFORMATION</caption>
  <tr>
    <th>Employee ID</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>0001</td>
    <td>Arvind</td>
    </tr>
    <td>0002</td>
    <td>Mahesh</td>
    </tr>
    <td>0003</td>
    <td>Shankar</td>
  </tr>
</table>

The HTML thead tag defines the header of a table (HTML table tag). Headers, as well as footers (HTML tfoot tag), are used to define "titles" or captions for the columns of a table. They are very helpful when the table is shown in more than one page (e.g., when a table is printed). In those cases the headers and footers may appear in each page.

The HTML tbody tag defines a block that will represent a body in a table (HTML table tag). Tables may have multiple bodies, but when it only has one single body, the HTML tbody tag may be safely omitted. When this happens every row that doesn't belong to the headers (HTML thead tag) or the footers (HTML tfoot tag), belongs to the implicit HTML tbody tag.

The HTML tfoot tag defines a footer in a table (HTML table tag). Footers, as well as headers (HTML thead tag), are used to define "titles" or captions for the columns of a table. They are very helpful when the table is shown in more than one page (e.g., when a table is printed). In those cases the headers and footers may appear in each page. Note that authors should place the HTML tfoot tag before any HTML tbody tag. This will allow browser to render footers even when the body (or bodies) of a table hasn't been received yet (in some cases a large amount of information).

USAGE EXAMPLE:

Code:

<table border="1">
  <thead>
    <tr>
      <th>Employee ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
    <td>Arvind</td>
    </tr>
    <tr>
      <td>0002</td>
    <td>Mahesh</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>0003</td>
    <td>Shankar</td>
    </tr>
  </tfoot>
</table>

The HTML col tag is used in tables to set default attributes for all the cells in a column or a group of columns. The HTML col tag is defined in an ordered way and can be part of a HTML colgroup tag or not. To define a set of attributes for multiple consecutive columns use the "span" attribute.

USAGE EXAMPLE:

Code:

<table width="100%" border="1">
  <col align="left"></col>
  <col align="left"></col>
  <col align="right"></col>
  <tr>
    <th>EMPLOYEE ID</th>
    <th>NAME</th>
    <th>PAY SCALE</th>
  </tr>
  <tr>
    <td>0001</td>
    <td>Arvind</td>
    <td>$20,000</td>
  </tr>
  <tr>
    <td>0002</td>
    <td>Mahesh</td>
    <td>$15,000</td>
  </tr>
  <tr>
    <td>0003</td>
    <td>Shankar</td>
    <td>$17,000</td>
  </tr>
</table>

The HTML colgroup tag is used in tables to group columns. This allow author to group columns, define default attributes for them as well as to set a visual format for the table (with "rules" attribute for the HTML table tag).

USAGE EXAMPLE:

Code:

<table width="100%" border="1">
  <colgroup span="2" align="left"></colgroup>
  <colgroup align="right" style="color:#0000FF;"></colgroup>
  <tr>
    <th>EMPLOYEE ID</th>
    <th>NAME</th>
    <th>PAY SCALE</th>
  </tr>
  <tr>
    <td>0001</td>
    <td>Arvind</td>
    <td>$20,000</td>
  </tr>
  <tr>
    <td>0002</td>
    <td>Mahesh</td>
    <td>$15,000</td>
  </tr>
  <tr>
    <td>0003</td>
    <td>Shankar</td>
    <td>$17,000</td>
  </tr>

-Arvind

The HTML style tag provides a way to define style rules within the document's HTML head tag. The style rules may help authors to set visual attributes to the elements.

USAGE EXAMPLE:

Code:

<style type="text/css">
p {color:red; font-size: 8pt; font-family: arial,helvetica}
p.big { font-size: 12pt; font-family: arial,helvetica}
</style>
</head>
<body>
<h1>Heading</h1>
<p>This is a paragraph....</p>

So the above example will declare a style for all the paragraph...




The HTML div tag allows authors to assign certain attributes to blocks of contents. It's primary used in conjunction with style sheets to give visual styles to portions of content in a document. Also, the "id" attribute gives a way to dynamically change these attributes with or without the user interaction. Browsers usually place a break line before and after a div block, so if you are looking for an in-line version check the HTML span tag.

USAGE EXAMPLE:

Code:

<p>I am now in the default color</p>
<div style="color:#00FF00">
  <h3>I have a color change because of div tag</h3>
  <p>I am still in div tag</p>
</div>
<p>I am out of div tag, so came back to default color</p>

The HTML span tag provides a way to define attributes to a piece of text. It's mostly used in conjunction with style sheets to set presentational attributes that will define the visual style of the content.

Instead of the HTML div tag, defined for block-level content, the HTML span tag is used as in-line.

USAGE EXAMPLE:

Code:

<html>
<head>
<style type="text/css">
span.blue {color:lightskyblue;font-weight:bold}
span.green {color:darkolivegreen;font-weight:bold}
</style>
</head>
<body>
<p>This is <span class="blue">light blue</span> color and this is <span class="green">dark green</span> color</p>
</body>
</html>

-Arvind