[Home]

Topics

Tutorial

HTML

Dreamweaver

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

s

Tutorial HTML - Creating Tables

Table

  • Composed of rows running across the screen, and columns that run up and down.
  • The intersection of a row and a column is called a cell.
  • Tables are referred to by row first and by column second.
Tag
Description

<TABLE> ... </TABLE>

 Table tag. You can set the table with using the attribute WIDTH and the tickness of the border using the attribute BORDER.
<TH> ... </TH>
 Table header tag. This tag will give bold letters. <TH> tag is placed in the <TR> tag.
<TR> ... </TR>
 Table row tag. To start with a new row, use this command. This command must be in the code <table> tag.
<TD> ... </TD>
 Table data tag. The table contents are placed in between these tags. If the table had three columns, every row would have three sets of this code tag. the table data code is place in the tag <TR>.
<CAPTION> ... </CAPTION>
 Table caption tag. This tag allows you to place a caption either above or below the table.

up

<TABLE>

  • Attribute:
    • ALIGN - specifies the margin to which the table is justified, with the text flowing around the table if there is a room.
    • BGCOLOR attribute - to change the color of the background for the text inside the table.
    • BORDER attribute - allows you to tell the browser whether or not to put a border around the table and also between each cell.
    • CELLPADDING attribute - allow you to determine the amount of space between the data in a cell and the cell border.
    • CELLSPACING attribute - allows you to set the distance between the cells and also between the border of the table and the cell.
    • HSPACE (horizontal space) attribute - tells the browser how much room to leave between the table and the text or margin on either side of it. The wider the HSPACE, the more the table stands out from the margin and from the text beside it.
    • VSPACE (vertical space) attribute - controls how close the table lies to the top or bottom of the window and also how close the surrounding materials (text or images) lies to the top and bottom of the table.
    • WIDTH attribute - controls how wide a table is.

    up

<TR>

  • Attribute:
    • ALIGN attribute - specifies the horizontal alignment of the data within the cells comprising this row.
    • BGCOLOR attribute - you can change the color of each row of your table.
    • BORDERCOLOR attribute - allow you to specify the colors for the borders of a row.
    • VALIGN attribute - this attribute instructs the browser regarding the vertical placement of the data within the cells in that row.

     

up

<TD> and <TH>

  • Attribute:
    • ALIGN attribute - alignment is just for the cell it is coded for.
    • BGCOLOR attribute - allows you to set the background color for a particular cell.
    • BORDER COLORS attribute - allows you to set the border color for each cell.
    • VALIGN attribute - it allows for vertical alignment of the data within a single cell of the table.
    • WIDTH attribute - set the width for that column in the whole of the table.

     

up

COLSPAN

  • Tell the browser how many columns you want the particular cell to span.

ROWSPAN

  • Create a cell that spans two or more rows.
  • This attribute is useful for creating headings and legends for the cell in a table.

up

 

EXERCISES

Please copy these exercise into Notepad and save (Don't forget to put .html). Then, launch Internet Explorer and go to File > Open > Browse (find your saved file). Click OK.

up

back Creating Lists and Headings | Creating Formsnext

 

 

 

 

 

 

 

Copyrights Reserved © Web Publishing 2003

Assessment

  • Assignment 1
  • Assignment 2
  • Quiz 1
  • Quiz 2
  • Project

 

Announcement

To all my students!

Please visit this web site regularly.