Tables: Basic Elements

Header 1 Header 2 Header 3

Row 1, Column 1 Row 1, Column 2 Row 1, Column 3

Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

Row 3, Column 1 Row 3, Column 2 Row 3, Column 3

Objectives

1. Identify table elements

2. Create a table by planning, designing, and coding

3. Design a table without a border

4. Design a table with a border

Simple vs. Complex

1. Simple

2. Complex

Tables and Web Pages

Present information using columns and rows Makes content clear and easy to read Organize text, images, links, etc

Wrap text around images

Web designers can use simple and/or complex tables

Table Elements

RowsColumnsCellsBordersHeadersCaption

Table Elements: Rows

Row – a horizontal line of information

Table Elements: Columns

Column – vertical line of information

Table Elements: Cells

Cell – Intersection of a row and column1. Heading cells – display text as bold and centered2. Data cells – display normal text that is left-aligned

Table Elements: Borders

Borders – lines that cover the edges of the table

Table Elements: Headers

Headers – bold text that indicates the reason of the rows or columns

Header 1 Header 2 Header 3 Header 4

Table Elements: Caption

Caption - text above or below the table that explains the purpose of the table

OR a caption could be here to let a reader know more information of this table

A caption could be here to let a reader know more information of this table

3 Step Process

1.Is the table needed?2.Plan the table3.Design/Code the table

Is the table needed?

A table is appropriate when it makes the Web page easier to readTherefore, not all Web pages need

Tables

Table Planning

Plan how much information is going to be needed

Create a good designSketch the end result of a table before coding

Table Coding

Four major tags in codingTag Purpose

<Table></Table> •Tells when a table begins/ends•All other codes belong within these two tags

<TR></TR> •Informs when a new row should begin/end•Heading or data cell

<TH></TH> •Indicates when a new column should begin/end•Default heading cell

<TD></TD> •Shows when a data cell should begin/end•Default data cell

Guided Practice

Block Class

1st Business Essentials

2nd Fundamentals of Web Design

3rd Advanced Web Design

4th Planning

Block Class

1st Business Essentials

2nd Fundamentals of Web Design

3rd Advanced Web Design

4th Planning