LESSON Extension Module 2: HTML Basics Tables

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

Guiding Question for Lesson Extension Describe a situation in which Web content could be organized using a table. Post the question in an area where students can read the question and allow time for students to respond to the question. Discuss the student answers the question.

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. Discuss how to use tables. Tables make it easy to present data by arranging it into columns and rows. To create a table within a Web page, several HTML tags are needed. First, a <table>…</table> tag identifies the beginning and ending of the table material. Each row of the table is defined by a <tr>…</tr> tag. Each piece of data that is placed into the row is further identified by a <td>…</td> tag.

Example of code creating a table: <tr> <td>one</td> <td>two</td> <td>three</td> </tr> </table> A very simple one row and three column table might be created by using the following HTML code: <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> To create a border around the table, use the border attribute with the table tag. The width of the border can be defined by using an integer with the border. Adding a medium sized border (3) to the previous example 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> To create a heading in the table, use the heading tag before the table data. This will place a bold and centered heading at the top of each column. Adding a heading to the 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> 7

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> Horizontal alignment can be created by adding the align (align=position) attribute to the table data tag. Horizontal alignment can be left, right, or centered. Adding a centered horizontal alignment to our 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> 8

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. Vertical alignment is very similar to horizontal. The attribute (valign=position) is added to the table data tag. Vertical alignment can be top, bottom, or middle. Vertical alignment will only be visible when a table has a cell that spans two or more rows. 9

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. At times, a cell that spans more than one row or column may be needed. In these cases, attributes can be added to the table data tag to create this situation. A rowspan=integer will create a cell that spans horizontally across a certain number of rows. A colspan=integer will create a cell that spans horizontally across a number of columns. Answer the “Write the table data code for the one cell in this example.”: <td align=center valign=top rowspan=2>one</td> 10

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> It is also possible to define how far across the Web page the table will extend. Using a width=x% attribute with the table tag will give this result. To have our “one two three” table to extend across half of the Web page, add width=”50%” to the table tag. Our new table code would look like this: <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> 11

Lesson Review Describe the result of the following HTML: <td align=right rowspan=2>145</td> <table border=5 width=100%>…</table> <th>Student</th><th>Locker Number</th><th>Class</th> <td colspan=3><b>Senior Class Schedule</b></td> Review concepts covered if needed with the students and discuss the practice activity. The number 145 will be on the right side of a cell that is two rows wide. Creates a table with a border of 5 and fills the Web page. Create three column headings – Student, Locker Number, and Class. The words Senior Class Schedule will be bolded on the left side of a cell that extends across 3 columns.

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. This is the last slide of the presentation.