Use Tables for Layout Control Day 7. You will learn to: Understand Tables Create a Simple Table...

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.

You’ve created a simple table.

You create a table with only three elements:

1. <table></table> Use this element for each table you wish to create

2. <tr></tr> (table row) establishes a row. Use every time you want a row

3. <td></td> (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 <th> </th> Element to Add

Headings to Your Table To add a heading, you use <th></th>

instead of the <td> 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.

Add Captions with the <caption> </caption>element

A caption can be used to display a title for you table.

Add the following code right after the opening table tag:

<caption>How to Use Tables</caption>

Display a Border Simply add the border=“ “ attribute

to the opening <table> tag. To add a border that is three pixels

wide go back to your code and modify the table tag to read like this:

<table border=“3”>

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 <td> tag to read <td align=“center”>

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 cell’s 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

<td valign=“top”>, Entire rows <tr valign=“middle> or a complete table <tbody valign=“bottom”>

<table border=“3” height=“200” width=“200”>

<tr> <td align=“left”>Left</td><td align=“center”>Center</td><td align=“right”>Right</td>

</tr><tr><td valign=“top”>Top</td>

<td valign=“middle>Middle</td><td valign=“bottom>Bottom</td>

</tr>

<tr><td valign=“baseline”>Baseline</td><td align=“justify”>Justify</td><td>Default</td></tr></table>

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 <table> element to control the color of the entire table

Place bgcolor=“” in the <tr> element to control the color of a row

Place bgcolor=“” in the <td> 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 <table> tag

Add this to your first tableCellspacing=“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 cell’s opening <td> 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 (<td>X</td>) 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 cell’s opening <td> tag to read

<td colspan=“2”>

Set Height and Width with Fixed or Dynamic Design Fixed Design involves specifying a table’s

dimensions in concrete terms. For example if you want to stretch the sample table horizontally, you could specify that the sample table you’ve been constructing should be 200 pixels high by 500 pixels wide by changing the opening table tag to read

<table height=“200” width=“500”>

Dynamic Design You describe a table’s dimensions

using percentages.<table height=“75%” width=“75%”>

Add this to your first open table tag.

Position Tables on a Page Element such as <div>, <span>,

and <center> 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

<div> or <span> 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 <div>, you would right the code as follows:

<div align=“right”><table></table></div>

The <span> element will produce similar results

Position Tables w/attributes By using the align=“” attribute inside

the <table> 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.

<align=“right”> text will wrap to left<align=“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”

Use Tables for Layout Control Day 7. You will learn to: Understand Tables Create a Simple Table...

Documents

Transcript of Use Tables for Layout Control Day 7. You will learn to: Understand Tables Create a Simple Table...