Skip to Main Content or Page Contents

How to create simple HTML Tables

Creating simple & more complex tables.

Results per page:

Match: any search words all search words

This Page's Contents

Lesson Introduction  
Elements Required for a simple table

<TABLE> <TR> <TD>
<CAPTION> (Caption element is optional)
Table attributes align background bgcolor border bordercolor bordercolordark bordercolorlight
A Simple Table Exercise 1. Very simple 1 Cell Table- no border
Exercise 2. Add a blank line, a table with a red border
Exercise 3. Table width, pixels or %
Multi Column and Row Table Exercise 4. Multi Column and Row
Exercise 5. Add a column
Exercise 6. Add a row

Lesson Introduction - HTML Tables

Tables were originally created for displaying tabular data and for this they are ideal. Web page designers also use them create Web page layout. In this lesson you will learn how to write the HTML code for a very useful HTML element - The table.

You will learn: How to

  • create a simple table, followed by more complex ones.
  • display borders to the table.
  • Colouring table cells.
  • After you have done the graphics lesson, how to place a graphic into a table cell.
  • Create nested tables
  • And more

John McGuinn

A simple table example

  Cell  
    Another cell

This table consists of

  • 2 rows
  • 3 columns, providing 6 cells.
  • A border, making the table visible. If the border is set to 0 then the border is invisible,
  • A table can be placed within a cell of another table, this creates a nested table. You can insert a table within another table thus nesting them. A nested table cannot be larger than the cell that contains it.
Top.

Elements Required for a simple table

Table 1: Elements Required for a simple table
Element Description / Comments End Tag Attributes
<TABLE> The table is a rectangular container for further elements Req. align, background, bgcolor, border, bordercolor, bordercolordark, bordercolorlight, cellpadding, cellspacing, cols, datapagesize, datascr, dir, frame, height, rules, summary, width
<TR> The TR element (Table Row) is a container for only one row, and the cells of that row, denoted by the TD element, or to a lesser degree by the THEAD TFOOT or TBODY elements Opt align, bgcolor, border, bordercolor, bordercolordark, bordercolorlight, char, charoff, valign
<TD> The TD element is a container for a single cell Opt

abbr, align, axis, background, background, bgcolor, border, bordercolor, bordercolordark, bordercolorlight, datafld, char, charoff, columspan, headers, height, nowrap, rowspan, scope, valign, width
<CAPTION> Add a caption to a table (Optional) Req. align, valign

 

Table Attributes

Table 2: Popular attributes of a table
  Values The default value in bold Examples End Tag comment
align left, center, right <TABLE align="center">
<TD " align="center">Cell contents</TD> 		Req. deprecated
background a URL

<TABLE background="an-image.gif">

The URL above is only a file name, indicating that the file is in the same directory as the web page.

 Req.

An image file that can be used as a background for the table. Best results are achieved with a non animated and having very subtle colours.

NN n/a
bgcolor A color name, or # and an hexadecimal value <TABLE bgcolor="red">
<TABLE bgcolor="#FF0000">
<TR bgcolor="blue">
<TD bgcolor="green">

 Req.

The fill colour for the entire table, using TABLE
Entire row, using TR
Single cell, using TD.
border a number

<TABLE border="0">
<TABLE border="1">

align background bgcolor border bordercolor bordercolordark
bordercolorlight

 Req. The value determines the border thickness in pixels.
0 The border is not visible.
bordercolor A color name, or # and an hexadecimal value <TABLE bordercolor="white">
<TABLE bordercolor="#FFFF00">		 Req. The default value varies.
bordercolordark
bordercolorlight 		As above   Req.

The default value varies.

NN n/a
bordercolor, bordercolordark, bordercolorlight do not validate at W3C with
as HTML 4.0 or 4.01.

 

A Simple Table

The following is the simplest table available having only 1 cell, containing the text 'Some Text'
Because the table has been coded without a border attribute you can't see the table, only the text contents 'Some Text'. A table's CAPTION element will be used in this lesson to help you follow the code and result examples. Note that CAPTION is optional.
Code Result 
<TABLE width="100">
    <CAPTION>Table 1</CAPTION>
     <TR> 
              <TD>Some Text</TD>
     </TR>
</TABLE>
Table 1
Some Text


All the exercises in this lesson will use the file t5-exercise.htm, which you will create as usual with save as ... in exercise 1.
After each save, always check the result in your browser. The result should be similar to the examples shown. Correct the code if required and recheck the result.

Exercise 1. Very simple 1 Cell Table- no border

  1. Copy the above HTML code.
  2. Save as ... t5-exercise.htm and check the result.
  3. Add an element that will make the caption bold. If you can't work this out see the next exercise.
  4. Save.

The next example is the same with the border attribute set to 1, and the bordercolor attribute set to #FF0000 (Red). Note how the border appears as a twin line. Think of the outer line as the table border and the inner line as the cell border.

As you contiue to a more complicated table you will retain your original table and add code for the new table below the origial code.

Exercise 2. Add a blank line, a table with a red border

  1. Copy the code between the start and end BODY tags that you used for exercise 1.
  2. Paste the code immediately before the end BODY tag
  3. Change the caption of the lower code to Table 2
  4. Save and view the result. You should now have the 2 tables with 1 above the other, each with its own correct caption
  5. Amend the Table 2 code as follow
    1. Add a TABLE attribute, border with the following code, border="1"
  6. Save and view the result. The lower table should now have a border, the default colour should be a grey.
  7. Change the colour of the border using the TABLE attribute, bordercolor, as follows bordercolor="#FF0000"
  8. Save and view the result.
  9. Add some 2 or 3 blank lines between the 2 tables with <p>&nbsp;</p> for each blank line.
  10. Save and view the result.

Your code for Exercise 2 should be similar to the following.

 
<p>&nbsp;</p>
<p>&nbsp;</p>
<TABLE width="100"  border="1">
     <CAPTION><strong>Table 2</strong></CAPTION>
     <TR> 
              <TD>Some Text</TD>
     </TR>
</TABLE>
Table 2
Some Text

bordercolor does not validate at W3C with
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.00 Transitional//EN">

Exercise 3. Table width, pixels or %

The width can be either expressed as a number of pixels or as a percentage of the width of its container, which can be the screen width, or another table if it is nested.

The implications that result from this exercise are very important.

  1. Copy the code for Table 2 and paste it immediately before the end BODY tag.
  2. Change the caption of the additional code to Table 3 . Add a blank line between Tables 2 and 3.
  3. Add some more text to the contents of Table 2, and increase the width of the cell, so that when viewed in the browser, the cell and its text content should almost fill the full width of the browser window, when the browser window is at its full screen width. The width value should be a little less than the screen resolution width. You may have to experiment, saving and viewing a few times, to achieve this result.
  4. Copy the cell text content from Table 2 to Table 3
  5. Change the width of Table 3 from width="100" to width="100%"
  6. Save and then view the result in your browser with the browser window at full screen width. The results of the 2 tables should be very similar. Table 2 should be almost the full width of the browser window. Table 3 should be exactly the width of the browser window.
  7. Now the important bit. Slowly narrow the width of the browser window watching the right side of the 2 tables. Table 2 will start to disapear off the edge of the window, but Table 3 will stay the full width of the window. As you continue narrowing the text in Table 3 will start to wrap onto a second line, and as you continue to narrow this process will continue.

At this stage you may not appreciate the importance of the difference between using pixels or % for width, or in mulicolumn tables a mixture of the two. This will come with experience.

Multi Column and Row Table

Exercise 4. Multi Column and Row.

This following table consists of

  • 2-rows. There must be the same number of TR elements as rows.
  • 3 columns thus providing 6 cells. The cells contents in the top row are A1 to A3, and B1 to B3 in the bottom row for easy recognition in the code.
    • There must be the same number of TD elements as columns in each row.
    • The width of 2 columns are set to 50 pixels and the center column is set to 100 pixels
  • Cell A3 has been center aligned. Compare this to cell B3
  • The table itself
    • is center aligned within this cell of an outer table
    • Has a border, with the border attribute set to 1
    • color attribute set to #FF0000 (Red)
    • Width set to 200 pixels
  • The bgcolor of the bottom row is red

Take a note of the indentation and blank lines in the code below. This is to make the code easier to read, and does not effect the look of the table. It does however length the size of your file, making downloads longer. This white space can be trimmed out before publication if required. There are programs that will do this automatically for you. The textual contents of the cells are labelled to make identification easy to follow.

 
 <TABLE width="150"  border="1"  align="center">
     <CAPTION><strong>Table 4</strong></CAPTION>

     <TR> 
          <TD width="50">A1</TD>
          <TD width="50">A2</TD>
          <TD width="50" align="center">>A3</TD>
     </TR>

     <TR bgcolor="red"> 
          <TD>B1</TD>
          <TD>B2</TD>
          <TD>B3</TD>
     </TR>

</TABLE>
Table 4
A1 A2 A3
B1 B2 B3

Exercise 5.
Add another column to this table with the contents A4 and B4.

Give the table a back color of #CCCCCC

Save, and browse the result. Correct your code if required.


Exercise 6.
Add another row, C1 to C4

See our KompoZer Table & CSS Tutorial
Top.

MUCH MORE TO FOLLOW SHORTLY, including more complex tables