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 Tables COMPLEX TABLE SIMPLE TABLE colored cells column spanno cell borders 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 images in table borderless table

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 border caption heading cell

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 bulleted list

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 cells data cells start table end table

20 Table Attributes

21 Create the following table Grade LevelBIT Course 9 th Computer Applications 10 th Business Document 11 th Multimedia 12 th Web Page