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 CityState

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 CityState

Data Cells Data Cells display little and plain and normal. BonnieMills300 Bell St. LACA

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. CityState

A Table Caption A Table Caption is text that describes the purpose of a table. CitySTATE Harbor CityCA This table needs something else... Color !

Planning, designing and coding Creating Tables is a THREE step process 1.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 dont 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 race10K race Time

The Big Race How many rows? How many columns? Name1Name2Name3Name4 Time

5K10K Name1 Time

Coding the Table What are tables used for? Tables are used to make data easier to interpret or to just give your document more impact.

Start the TABLE Tables are one of the most challenging things to code with HTML. Tables start with the tag, and usually contain the border=n attribute within the opening tag.

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. This table has a border of 0. This table has a border of 3. This table has a border of 3.

Each Row is defined Each row within the table is defined by the opening tag and the optional closing tag.

Within each row…table cells Within each table row are table cells, which are defined by the opening and closing tags. 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 opening and closing tag.

Heading Tags The table heading tag makes the text in that cell BOLD and CENTERED. You only need use the heading cells when necessary.

Heading A Heading B Heading C Cell A Cell B Cell C Cell D Cell E Cell F

Example of Multiple Rows and Columns Heading AHeading BHeading C Cell ACell BCell C Cell DCell ECell F

ROWSPAN=2 Heading A Heading B Heading C Cell A & D Cell B Cell C Cell E Cell F

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. ALIGN=LEFT, ALIGN=CENTER or ALIGN=RIGHT

Vertical Allignment If you wish to change the vertical alignment of the contents of a cell, VALIGN=TOP, VALIGN=MIDDLE, or VALIGN=BOTTOM attributes.

Width Attribute You may also want to try out the WIDTH=n% attribute, to change the width of a table or a cell.

Left Alignment Center Alignment Right Alignment

Title goes here Body goes here Headings are kewl! Tables give impact!

Coding the Table Indicates the beginning and end of the table. All other tags go within these tags.

Here comes a ROW !! Indicates the beginning and end of a table ROW Rows consist of headings or data cells

T able H eading Cell Indicates the beginning and end of a t able h eading cell. Heading cells default to Bold and center alignment. Heading Cells have macho ATTITUDE !!

T able D ata Indicates the beginning and end of a t able d ata cell. Data cells default to normal text with left alignment. Data cells are normal and ordinary.

Table ATTRIBUTES ALIGN (LEFT, RIGHT, CENTER) BGCOLOR BORDER CELLSPACING(between cells) CELLPADDING(within cells) COLS WIDTH (relative to window width)

Table Row Attributes ALIGN (LEFT, CENTER, RIGHT) BGCOLOR VALIGN (TOP, MIDDLE, BOTTOM)

Table Header Attributes and 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)