Presentation on theme: "Use Tables for Layout Control Day 7. You will learn to: Understand Tables Create a Simple Table Modify Your Tables Appearance Create Page Layouts with."— Presentation transcript:
Use Tables for Layout Control Day 7
You will learn to: Understand Tables Create a Simple Table Modify Your Tables Appearance Create Page Layouts with Tables Design a Table of Links for Site Navigation
Create a Simple Table Tables are not difficult to understand or build. Can become complex, but concept is easy Picture a spreadsheet and you visualize a table. Each segment is called a cell
Open template.htm Save as: TABLES.HTM Copy the following code to create a simple three cell by three cell table.
X X X
Youve created a simple table. You create a table with only three elements: 1. Use this element for each table you wish to create 2. (table row) establishes a row. Use every time you want a row 3. (table data) element creates individual cells in a row. Whatever content you want to place in the table goes between these tags
Modify your tables appearance Add Headings and Captions Display a Border Position your Content Add Background Colors Adjust Space In and Between Cells Make Cells Span Multiple Columns and Rows Adjust Height and Width Position Tables on Your Page Modify Borders and Cell Divisions Add Images and Links
Add Headings and Captions Use the Element to Add Headings to Your Table To add a heading, you use instead of the element It will display the text inside the cells as centered and boldface. Add this code to the table right after the opening table tag.
Col 1 Col 2 Col 3
Add Captions with the element A caption can be used to display a title for you table. Add the following code right after the opening table tag: How to Use Tables
Display a Border Simply add the border= attribute to the opening tag. To add a border that is three pixels wide go back to your code and modify the table tag to read like this:
Position Your Content You should have noticed that your Xs in your table are aligned to the left sides of their cells. If you want the content to be centered or right-justified, there are a couple of options.
Position content Horizontally with the align= Attribute You must include the align attribute in each cell where you want to specify the position. For example, to center text you would modify a tag to read There are several options for alignment:
Left Aligns cell contents to the left. This is the default alignment Right Aligns cell contents to the right. Center Aligns cell contents to the center. Justify Also aligns the cells content to the left.
Control Vertical Alignment with the valign= Attribute You can determine whether your content aligns at the top, middle, or bottom of a cell by using the valign attribute. Enables you to specify the vertical positioning for individual cells, Entire rows or a complete table
Left Center Right Top Middle Bottom
Baseline Justify Default
Add Background Colors Setting you background colors is easy using the bgcolor attribute You can set the color for individual cells, for individual rows, or for the whole table.
Set table color with bgcolor This attribute, used with a table, is great for creating navigation bars in you Web pages. Place bgcolor= in the element to control the color of the entire table Place bgcolor= in the element to control the color of a row Place bgcolor= in the element to control the color of individual cells
Use cellspacing to Adjust the Space Between Cells The cellspacing attribute allows you to add space between the cells in your table as measured in pixels. This attribute must go inside the tag Add this to your first table Cellspacing=10
Use cellpadding to Add Space Inside Cells Cellpadding adds space inside the cells It also adds a layer of padding around the contents of the cell. Add this to your first table: Cellpadding=10
Make cells Span Multiple Columns and Rows You can make one cell span two or more rows or columns To make a cell span multiple rows, insert the rowspan= attribute in the cells opening tag Make the top left cell in your table span two rows by adding Rowspan=2
Caution When you add the rowspan attribute to the code for your table, be sure to remove one of the cells ( X ) in the second row
Make a cell span columns To do this you add the colspan=attribute Remove one of the cells from the bottom row of your first table and modify the last cells opening tag to read
Set Height and Width with Fixed or Dynamic Design Fixed Design involves specifying a tables dimensions in concrete terms. For example if you want to stretch the sample table horizontally, you could specify that the sample table youve been constructing should be 200 pixels high by 500 pixels wide by changing the opening table tag to read
Dynamic Design You describe a tables dimensions using percentages. Add this to your first open table tag.
Position Tables on a Page Element such as,, and provide a quick and easy solution for alignment. You also can position tables with the align attribute and CSS provides an option for table placement with its float property.
Position tables w/elements If you enclose your table inside the or elements along with the align= attribute, you can position the table to the left, center, or right. Any text or page content coming after the table will start immediately below it.
To right-align a table using, you would right the code as follows: The element will produce similar results
Position Tables w/attributes By using the align= attribute inside the tag, you can also position a table in the center or on the right side of the page. An advantage of using the align attribute is that any outside text will wrap around the table. text will wrap to left text will wrap to right
Modify Borders and Cell Divisions Sometimes, you might want only a partial border or just rule lines drawn between the cells. There are ways to accomplish this using both HTML and CSS
Use the HTML frame attribute to Adjust Table Borders If you want to make changes to how the outer border of a table displays, the HTML frame= attribute gives you quite a few options. By inserting the following attributes, you can select portions of the table border to display, while others remain visible:
To display only the top: frame=above To display only the bottom: frame=below To display only the left side: frame=lhs To display only the right side: frame=rhs To display both the left and right sides: frame=vsides To display both the top and bottom sides: frame=hsides To display no outside border at all: frame=void
Use the rules attribute to Adjust Interior Borders Just as frame enables you to control the outer borders of a table, rule gives you control over the interior borders, or rules, between the cells. With the rules attribute you can remove all the interior borders, just the horizontal ones, or just the vertical ones.
To display vertical rules: rules=cols To display horizontal rules: rules=rows To display no rules: rules=none To display rules between table groups: rules=groups