Tables Module 2: HTML Basics LESSON Extension. Module 2: HTML Basics LESSON Extension Lesson Overview In this lesson, you will learn to: Create tables

TablesTables

Module 2: HTML Basics

LESSON ExtensionLESSON ExtensionLESSON ExtensionLESSON Extension



Lesson OverviewIn this lesson, you will learn to: Create tables using HTML code. Format a Web page using tables.



Guiding Question for Lesson Extension Describe a situation in which Web content could be organized

using a table.



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.



Example of code creating a table:

<table><tr><td>one</td><td>two</td><td>three</td></tr></table>



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>



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>



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>



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.



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.



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>



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>



Practice: TablesCreate 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.

Documents

Tables Module 2: HTML Basics LESSON Extension. Module 2: HTML Basics LESSON Extension Lesson Overview In this lesson, you will learn to: Create tables