How to create simple HTML Tables

tutorials4u.com

Home HTML Tutorial

Tutorials

T171 News. Tips

1 Required Programs

2. First Web Page

3 Page Appearance

4 Colour RGB System

4a Colour Names

5 Tables

6 Graphics

7 Linking.

8 Lists

9 Meta tags

10 Frames

11 Uploading

12 CSS

13 Scripts

14 Site Promotion

15 Site Design

16 Forms

99 Web Glossary

Information

Recommended Books

Editors and Authoring

Hosting

Link to us

Search engines

Useful Links

Software

Webmaster

Tools

Templates

5. HTML Tables

Page 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 table example

	Cell
		Another cell

This table consists of

2 rows
3 columns, thus providing 6 cells.
A border, making the table visible. If the border is set to 0 then the border is invisible,
The table itself is center aligned within another cell of an outer table, part of the page layout structure.
A table cannot overlap another table. Your page layout follows a grid with columns and rows, so a table can span several rows and/or several columns, but they can never actually overlap on the page. Advanced techniques can give the illusion of overlapping by the use of layers.

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

Search this site for a word or phrase. Place phrases inside "double quotes"

Top.

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.

Top.

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

Copy the above HTML code.
Save as ... t5-exercise.htm and check the result.
Add an element that will make the caption bold. If you can't work this out see the next exercise.
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

Copy the code between the start and end BODY tags that you used for exercise 1.
Paste the code immediatly before the end BODY tag
Change the caption of the lower code to Table 2
Save and view the result. You should now have the 2 tables with 1 above the other, each with its own correct caption
Amend the Table 2 code as follow
1. Add a TABLE attribute, border with the following code, border="1"
Save and view the result. The lower table should now have a border, the default colour should be a grey.
Change the colour of the border using the TABLE attribute, bordercolor, as follows bordercolor="#FF0000"
Save and view the result.
Add some 2 or 3 blank lines between the 2 tables with <P> </P> for each blank line.
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><B>Table 2</B></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.

Copy the code for Table 2 and paste it immediatly before the end BODY tag.
Change the caption of the additional code to Table 3 . Add a blank line between Tables 2 and 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.
Copy the cell text content from Table 2 to Table 3
Change the width of Table 3 from width="100" to width="100%"
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.
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><B>Table 4</B></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

Top.

MUCH MORE TO FOLLOW SHORTLY, including more complex tables

Leisure Time - book your holiday or flights with our UK sponsors

			Last minute	Save 10%
Book a Thomas Cook holiday	Book a Thomson holiday	Book a Portland Holidays Direct	Last minute	Save 10%

Thomas Cook flights	Thomson holiday flights	Flybe Cheap flights	British Airways flights	My Travel flights