HTML Tables

HTML Language

Tables

Tables can be used to list your information or data in a visual and clear fashion. The information or data will appear in rows and columns. Tables can also help to format the page.


Format

Here is an example:

<!DOCTYPE html>
<html>
 <body>
  <table border="1">
   <tr>
    <td>Row 1, Col 1</td>
    <td>Row 1, Col 2</td>
    <td>Row 1, Col 3</td>
   </tr>
   <tr>
    <td>Row 2, Col 1</td>
    <td>Row 2, Col 2</td>
    <td>Row 2, Col 3</td>
   </tr>
  </table>
 </body>
</html>

As you can see, a table in the program is identified with the tag <table>. Within the table, use <tr> tags to set the rows; and use the <td> tags to set up each of the data in the row it is written in. tr stands for Table Row, and td stands for Table Data. By adding the optional attribute "border" to the opening table tag, we sets the thickness of the border, 1 would be a thin border, and 2 a thick one, etc, 0 means no border.


Heading Row

You can add a row of heading into your table by using the <th> tag. By using this, and substituting <td> tags, you will create a row of headings, for example:

<!DOCTYPE html>
<html>
 <body>
  <table border="1">
   <tr>
    <th>Number</th>
    <th>Name</th>
   </tr>
   <tr>
    <td>1</td>
    <td>Alex</td>
   </tr>
   <tr>
    <td>2</td>
    <td>Bob</td>
   </tr>
  </table>
 </body>
</html>



Merging Cells

You can merge two or more cells together with the rowspan and colspan attributes.

<!DOCTYPE html>
<html>
 <body>
  <table border="1">
   <tr>
    <td rowspan="2">Done with rowspan="2"</td>
    <td>Normal Cell</td>
   </tr>
   <tr>
    <td>Normal Cell</td>
   </tr>
   <tr>
    <td>Normal Cell</td>
   </tr>
   <tr>
    <td colspan="2">Done with colspan="2"</td>
   </tr>
  </table>
 </body>
</html>



Formatting a Table

You can format a table further with many other attributes, such as border thickness, color, pattern, cell width, etc. It will all be very easy to format on a large scale once you are introduced to CSS, in the Page Design Lesson. You can simply search for a part of the table that you want to format and find the CSS you want. You can use HTML to format the table (and other elements), but will be much more inconvenient when you have more and more pages and tables. For the more specific CSS and HTML formatting, we will not go into detail in this tutorial but they are very easy to find on the Internet.


Practice

Create a 5 by 5 table with the first column (not row) as headings:

Try adding formatting to the table above.

Create a simple navigation bar by creating a table with contains several links (or buttons) in a row. Use the border="0" to hide the border of the table.


Tags

Tag Meaning
<table> Defines a table
<tr> Defines a row in a table
<td> Defines a cell in a row
<th> Defines a heading cell



<< Previous TOC Next >>