basic table elements. 2 objectives define table elements describe the steps used to plan, design,...
TRANSCRIPT
![Page 1: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/1.jpg)
Basic Table Elements
![Page 2: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/2.jpg)
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
![Page 3: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/3.jpg)
3
Introduction
Tables allow you to position elements easily on a Web page
You can develop simple tables or complex tables
![Page 4: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/4.jpg)
4
Creating Web Pages with TablesCOMPLEX TABLE
SIMPLE TABLE
colored cells
column spanno cellborders
row span
colored background
![Page 5: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/5.jpg)
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
![Page 6: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/6.jpg)
6
Creating Web Pages with Tables
text wrapping
![Page 7: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/7.jpg)
7
Creating Web Pages with Tables
imagesin table
borderlesstable
![Page 8: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/8.jpg)
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
![Page 9: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/9.jpg)
9
Table Elements
row
![Page 10: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/10.jpg)
10
Table Elements
column
![Page 11: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/11.jpg)
11
Table Elements
cell
![Page 12: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/12.jpg)
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
![Page 13: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/13.jpg)
13
Other Table Parts
bordercaption
headingcell
![Page 14: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/14.jpg)
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
![Page 15: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/15.jpg)
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
![Page 16: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/16.jpg)
16
Determining if a Table is Needed
table
bulletedlist
![Page 17: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/17.jpg)
17
Planning the Table
Must begin with good design Sketch the table before writing HTML
![Page 18: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/18.jpg)
18
Coding the Table
Four main tags in coding a table:
![Page 19: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/19.jpg)
19
Coding the Table
heading cellsdata cells
start table
end table
![Page 20: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/20.jpg)
20
Table Attributes
![Page 21: 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](https://reader036.vdocuments.site/reader036/viewer/2022062314/56649f175503460f94c2d3ac/html5/thumbnails/21.jpg)
21
Create the following table
Grade Level BIT Course
9th Computer Applications
10th Business Document
11th Multimedia
12th Web Page