Transcript Presentation

LESSON
Extension
Module 2: HTML Basics
Tables
L ES S O N
E xt e ns i o n
Module 2: HTML Basics
Lesson Overview
In this lesson, you will learn to:

Create tables using HTML code.

Format a Web page using tables.
L ES S O N
E xt e ns i o n
Module 2: HTML Basics
Guiding Question for Lesson Extension

Describe a situation in which Web content could be organized
using a table.
L ES S O N
E xt e ns i o n
Module 2: HTML Basics
Tables

Easy to present data by arranging it into columns and rows.

Tags needed:


<table>…</table>
begins and ends a table

<tr>….</tr>
defines a table row

<td>…</td>
defines data (content) for the row
Modern WYSIWYG Web design environments can use layers in addition
to tables to organize information.
L ES S O N
E xt e ns i o n
Module 2: HTML Basics
Example of code creating a table:
<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
L ES S O N
E xt e ns i o n
Module 2: HTML Basics
Creating a border around the table

A border attribute can be added to the table<table> tag

The width of the border is defined by an integer

A border with a medium sized border (3) would look like this:
<table border=3>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
L ES S O N
E xt e ns i o n
Module 2: HTML Basics
Creating a Heading

Use the table heading <th> tag to identify the heading words

Heading will be bold and centered of the top of each column

Adding a heading to our previous example would look like this:
<table border=3>
<th>Dogs</th>
<th>Cats</th>
<th>Monkeys</th>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
L ES S O N
E xt e ns i o n
Module 2: HTML Basics
Horizontal Alignment
•
Add the align (align=position) attribute to the table data <td> tag
•
Position can be left, right, or centered
•
Adding horizontal alignment to the previous example would look like this:
<table border=3>
<th>Dogs</th>
<th>Cats</th>
<th>Monkeys</th>
<tr>
<td align=center>one</td>
<td align=center>two</td>
<td align=center>three</td>
</tr>
</table>
L ES S O N
E xt e ns i o n
Module 2: HTML Basics
Vertical Alignment
•
Similar to horizontal alignment.
•
Add the attribute valign=position to the table data <td> tag.
•
The valign position can be top, bottom, or middle
•
Will only be apparent when a table cell spans two or more rows.
L ES S O N
E xt e ns i o n
Module 2: HTML Basics
Creating a larger cell within a table
•
A single cell can span more than one row or column.
•
Attributes can be added to the table data <td> tag.
•
Use rowspan=integer attribute to span a cell vertically across several rows.
•
Use colspan=integer attribute to span a cell horizontally across several
columns.
•
This example combines the attributes of rowspan and valign attributes.
•
Write the table data code for the one cell in this example.
L ES S O N
E xt e ns i o n
Module 2: HTML Basics
Table Width
•
Defines how far across the Web page the table will extend
•
Use width=x% attribute with the table <table> tag
•
To have the “one two three” table extend across 50 percent of the Web
page, create the following code:
<table border=3 align=center width=50%>
<th>Dogs</th>
<th>Cats</th>
<th>Monkeys</th>
<tr>
<td align=center>one</td>
<td align=center>two</td>
<td align=center>three</td>
</tr>
</table>
L ES S O N
E xt e ns i o n
Module 2: HTML Basics
Lesson Review
Describe the result of the following HTML:

1.
<td align=right rowspan=2>145</td>
2.
<table border=5 width=100%>…</table>
3.
<th>Student</th><th>Locker Number</th><th>Class</th>
4.
<td colspan=3><b>Senior Class Schedule</b></td>
L ES S O N
E xt e ns i o n
Module 2: HTML Basics
Practice: Tables
Create a table in your “Tags and Attributes” Web page that includes the
following:

A wide border (5)

One cell that spans two columns

Headings for each column

Each cells horizontally center aligned

Challenge Activity: Change the color of the text in the cells.