tables module 2: html basics lesson extension. module 2: html basics lesson extension lesson...
TRANSCRIPT
TablesTables
Module 2: HTML Basics
LESSON ExtensionLESSON ExtensionLESSON ExtensionLESSON Extension
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.
Module 2: HTML Basics
LESSON ExtensionLESSON ExtensionLESSON ExtensionLESSON Extension
Guiding Question for Lesson Extension Describe a situation in which Web content could be organized
using a table.
Module 2: HTML Basics
LESSON ExtensionLESSON ExtensionLESSON ExtensionLESSON Extension
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.
Module 2: HTML Basics
LESSON ExtensionLESSON ExtensionLESSON ExtensionLESSON Extension
Example of code creating a table:
<table><tr><td>one</td><td>two</td><td>three</td></tr></table>
Module 2: HTML Basics
LESSON ExtensionLESSON ExtensionLESSON ExtensionLESSON Extension
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>
Module 2: HTML Basics
LESSON ExtensionLESSON ExtensionLESSON ExtensionLESSON Extension
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>
Module 2: HTML Basics
LESSON ExtensionLESSON ExtensionLESSON ExtensionLESSON Extension
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>
Module 2: HTML Basics
LESSON ExtensionLESSON ExtensionLESSON ExtensionLESSON Extension
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.
Module 2: HTML Basics
LESSON ExtensionLESSON ExtensionLESSON ExtensionLESSON Extension
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.
Module 2: HTML Basics
LESSON ExtensionLESSON ExtensionLESSON ExtensionLESSON Extension
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>
Module 2: HTML Basics
LESSON ExtensionLESSON ExtensionLESSON ExtensionLESSON Extension
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>
Module 2: HTML Basics
LESSON ExtensionLESSON ExtensionLESSON ExtensionLESSON Extension
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.