HTMLComprehensive Concepts and TechniquesSecond Edition

Creating Tablesin a Web Site

October 23, 2012

Today’s Agenda

Hotspots – Questions?Introduction to Tables.Theater Club Web Page.Finish your worksheet from

yesterday.

2

Hotspots or Image MapsAny Questions?

Take out a pen or pencil – POP Quiz!

3

4

Creating Web Pages with Tablescomplex table

simple table

colored cells

column spanno cellborders

row span

colored background

5

Creating Web Pages with TablesTables can have text and/or imagesYou can use a table to wrap text

around an image– Tables give you more control over the

placement of the text and image

Tables help make the content on Web pages clear, interesting, and easy to read

6

Creating Web Pages with Tables

text wrapping

7

Creating Web Pages with Tables

imagesin table

borderlesstable

8

Table Elements

Tables consist of rows, columns, and cells– A row is a horizontal line of information– A column is a vertical line of information– A cell is the intersection of a row and a

column• Heading cells display text as bold and center-

aligned• Data cells display normal text that is left-

aligned

9

Table Elements

row

10

Table Elements

column

11

Table Elements

cell

12

Other Table Parts

Table borders are lines that encompass the perimeter of the table

Table headers are bold text that indicate the purpose of the row or column

A table caption is descriptive text located above or below the table that further describes the purpose of the table

13

Other Table Parts

bordercaption

headingcell

14

Planning, Designing, and Coding a TableCreating tables for a Web page is a

three-step process:– Determine if a table is needed– Plan the table– Code the table

15

Determining if a Table is NeededNot all Web page applications require

the use of tablesA table is appropriate when it makes

the Web page easier to read

16

Determining if a Table is Needed

table

bulletedlist

17

Planning the Table

Must begin with good designSketch the table before writing HTML

18

Coding the TableFour main tags in coding a table:

19

Coding the Table

heading cellsdata cells

start table

end table

20

Table Attributes

21

Start Notepad

To Do List:

Enter your tags for the Theater Club web page.

Finish your vocabulary words.

Finish your research!

22