Tables Module 2: HTML Basics LESSON Extension

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

Module 2: HTML Basics LESSON Extension Guiding Question for Lesson Extension  Describe a situation in which Web content could be organized using a table.

Module 2: HTML Basics LESSON Extension Tables  Easy to present data by arranging it into columns and rows.  Tags needed:  … begins and ends a table  …. defines a table row  … 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 Extension Example of code creating a table: one two three

Module 2: HTML Basics LESSON Extension Creating a border around the table  A border attribute can be added to the table tag  The width of the border is defined by an integer  A border with a medium sized border (3) would look like this: one two three

Module 2: HTML Basics LESSON Extension Creating a Heading  Use the table heading 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: Dogs Cats Monkeys one two three

Module 2: HTML Basics LESSON Extension Horizontal Alignment Add the align (align=position) attribute to the table data tag Position can be left, right, or centered Adding horizontal alignment to the previous example would look like this: Dogs Cats Monkeys one two three

Module 2: HTML Basics LESSON Extension Vertical Alignment Similar to horizontal alignment. Add the attribute valign=position to the table data 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 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 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 Extension Table Width Defines how far across the Web page the table will extend Use width=x% attribute with the table tag To have the “one two three” table extend across 50 percent of the Web page, create the following code: Dogs Cats Monkeys one two three

Module 2: HTML Basics LESSON Extension Lesson Review  Describe the result of the following HTML: … 3. Student Locker Number Class 4. Senior Class Schedule

Module 2: HTML Basics LESSON Extension 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.