Tables

Learn to create and enhance TABLES using a variety of attributes and

formats.

TABLES

• Tables allow you to POSITION elements on a web page.

Tables

• Tables make web pages look more organized and professional.

The borderless TABLE

•Creates a BANNER into which you can insert TEXT.

TABLE ELEMENTS

• Tables consist of ROWS and COLUMNS and CELLS.

Rows

• A Row is a horizontal line of information.

First

Name

Last

Name

Address City State

A Column

• A Column is a vertical line of information

Cell

• A CELL is the inter section of a row and column.

Building Tables

• Cells have TWO VARIATIONS: – Headings and DATA

Heading Cells

• Heading Cells display BIG and Black and BOLD

First

Name

Last

Name

Address City State

Data Cells

• Data Cells display little and plain and normal.

Bonnie Mills 300 Bell St.

LA CA

OTHER Parts of a TABLE

• Table Border

• Table Header

• Table Captions

Table Borders

• Table Borders are lines that go around the perimeter of a table.

Table Headers

• Table Headers are BOLD TEXT that indicate the purpose of the ROWS and Columns.

City State

A Table Caption

• A Table Caption is text that describes the purpose of a table.

City STATE

Harbor City CA

This table needs something else . . . Color !

Planning, designing and coding

• Creating Tables is a THREE step process1. Planning

2. Designing

3. Coding

Planning

Do you REALLY need a table?

• If you can explain the Web Page using ONLY paragraphs and Bulleted lists. You don’t need a table.

A Table is appropriate when

• You need to organize data so that it is easier for the reader to understand.

• The TABLE gives the web page a more professional look and

• More clearly explains the topic.

PLANNING the table

• Begin with a good design

• Sketch out on paper before writing the HTML code.

5k race 10K race

Time Time

The Big Race

• How many rows?

• How many columns?

Name1 Name2 Name3 Name4

Time Time Time Time

http://www.davesite.com/webstation/html/chap12.shtml

• http://www.davesite.com/webstation/html/chap12.shtml

5K 10K

Name1 Name1 Name1 Name1

Time Time Time Time

Coding the Table

• <table border=4> • <tr> • <th>What are tables used for?</th> </tr>• <tr> • <td>Tables are used to make data easier

to interpret or to just give your document more impact.</td>

• </tr> • </table>

Start the TABLE

• Tables are one of the most challenging things to code with HTML.

• Tables start with the <table> tag, and

• usually contain the border=n attribute within the opening tag.

<table border=4>

Invisible borders

• If the border=0, than the table's border is invisible.

• Usually when you do not use the border attribute the table border will become invisible.

Invisible borders

This is useful when you want to align text in rows and columns, but don't want a table border around it.

• border=1 is a thin border.• border=2 is a little thicker,

• border=3 a little more thick.. and so on.

Example of tables with borders...

This table has a border of 0.

<table border=0> <tr> <td>This table has a border

of 0.</td> </tr> </table>

This table has a border of 3.

<table border=3> <tr> <td>This table has a

border of 3.</td> </tr> </table>

Each Row is defined

• Each row within the table is defined by the opening <tr> tag and the optional </tr> closing tag.

<tr>

</tr>

Within each row…table cells

• Within each table row are table cells, which are defined by the <td> opening and </td> closing tags.

<td>

</td>Most table rows contain more than one cell.

Heading Tags

• Many times, you will need a heading for a column of cells of the first row.

• To do this, you will use the <th> opening and </th> closing tag.

<th>

</th>

Heading Tags

• The table heading tag makes the text in that cell BOLD and CENTERED.

• You only need use the heading cells when necessary.

<table border=2>

<tr> <th>Heading A</th><th>Heading B</th><th>Heading C</th>

</tr>

<tr> <td>Cell A</td><td>Cell B</td><td>Cell C</td> </tr>

<tr> <td>Cell D</td><td>Cell E</td><td>Cell F</td> </tr>

</table>

Example of Multiple Rows and Columns

Heading A Heading B Heading C

Cell A Cell B Cell C

Cell D Cell E Cell F

ROWSPAN=2

<table border=2>

<tr>

<th>Heading A</th><th>Heading B</th> <th>Heading C</th> </tr>

<tr>

<td rowspan=2>Cell A & D</td><td>Cell B</td><td>Cell C</td>

</tr>

<tr>

<td>Cell E</td><td>Cell F</td> </tr> </tr>

</table>

ROWSPAN

• Notice how the rowspan=2 attribute was added.

• This allows that cell to span two rows.

colspan=n

• If you want a cell to span more than 1 column, use the colspan=n attribute.

The ALIGN attribute

• you may wish to use the ALIGN and VALIGN attributes to align the contents of cells.

<TD>ALIGN=LEFT, ALIGN=CENTER or ALIGN=RIGHT

</TD>

Vertical Allignment

• If you wish to change the vertical alignment of the contents of a cell,

<TD>

VALIGN=TOP,

VALIGN=MIDDLE, or

VALIGN=BOTTOM attributes.

</TD>

Width Attribute• You may also want to try out the

WIDTH=n% attribute, to change the width of a table or a cell.

<table border=1 width=100%>

<table border=1 width=100%> <tr> <td align=left>Left Alignment</td> <td align=center>Center

Alignment</td> <td align=right>Right Alignment</td> </tr>

</table>

• <html><head><title>Title goes here</title></head><body bgcolor="#AABBCC"><h1 align=right>Body goes here</h1><hr><center><h3>Headings are kewl!</h3></center><hr size=10><table border=2 width=75%><tr><td>Tables</td><td>give</td><td>impact!</td></tr></table></body></html>

Coding the Table

<TABLE>

</TABLE>• Indicates the beginning and end of the table.

• All other tags go within these tags.

Here comes a ROW !!

<TR>

</TR>• Indicates the beginning and end of a table

ROW

• Rows consist of headings or data cells

Table Heading Cell

<TH></TH>

• Indicates the beginning and end of a table

heading cell.• Heading cells default to Bold and center

alignment.• Heading Cells have macho ATTITUDE !!

Table Data

<TD></TD>

• Indicates the beginning and end of a table data cell.

• Data cells default to normal text with left alignment.

• Data cells are normal and ordinary.

Table ATTRIBUTES

<TABLE></TABLE>• ALIGN (LEFT, RIGHT, CENTER)

• BGCOLOR

• BORDER

• CELLSPACING (between cells)

• CELLPADDING (within cells)

• COLS

• WIDTH (relative to window width)

Table Row Attributes

<TR> </TR>• ALIGN (LEFT, CENTER, RIGHT)

• BGCOLOR

• VALIGN (TOP, MIDDLE, BOTTOM)

Table Header Attributes

<TH> and </TH>• ALIGN (LEFT, CENTER, RIGHT, JUSTIFY)

• BGCOLOR• COLSPAN (sets number of columns spanned by cell)

• ROWSPAN(sets number of columns spanned by cell)

• VALIGN (vertically aligns cell)– (TOP, MIDDLE, BOTTOM)