Basic Table Elements

2

Objectives

Define table elements

Describe the steps used to plan, design, and code a table

Create a borderless table with text only

Create a table with borders

3

Introduction

Tables allow you to position elements easily on a Web page

You can develop simple tables or complex tables

4

Creating Web Pages with TablesCOMPLEX TABLE

SIMPLE TABLE

colored cells

column spanno cellborders

row span

colored background

5

Creating Web Pages with Tables

Can have text and/or images

Used to wrap text around an image Gives more control over the placement of

the text and image

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, & Coding a Table

Creating tables for a Web page is a three-step process:

1. Determine if a table is needed

2. Plan the table

3. Code the table

15

Determining if a Table is Needed

Not all Web page applications require the use of tables

A 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 design Sketch the table before writing HTML

18

Coding the Table

Four main tags in coding a table:

19

Coding the Table

heading cellsdata cells

start table

end table

20

Table Attributes

21

Create the following table

Grade Level BIT Course

9th Computer Applications

10th Business Document

11th Multimedia

12th Web Page