~Welcome to My Homework Pages~

Welcome image.


Heading image.Tables -Lesson One

The information continues....

Parts of a Table
Table Parts Description Accepting Attributes
<table>...</table> These tags provide the container for all other table tags. Browsers ignore the other table tags if they aren't contained inside these tags. The <table> tag accepts the attributes of align, border, cellpadding, cellspacing, and width.
<tr>...</tr> The table row tags contain the information for all the cells within each row of the table. Each set of table row tags represents a single row in the table, regardless of the number of cells in a row. The table row tag can contain both the align and valign attributes, which is specified, become the default alignments for all cells in the row. The <tr> tag accepts the attributes of align and valign.
<td>...</td> Each cell in the table is defined by the table data tags, which must be nested within table row tags. The following are good tidbits to know about table data tags and how they work.:
  • You don't have to worry about making each row contain the same number of cells because short rows are padded with blank cells on the right.
  • A cell can contain any HTML tag normally used within the body of an HTML document.
The <td> tag accepts the attributes of align, colspan, height, nowrap, rowspan, valign , and width.
<th>...</th> Table header tags display text in BOLD with the default of align="center". Otherwise, they are identical to table data tags,<td>. identical to table data tags; accepts the attributes of align, colspan, height, nowrap, rowspan, valign , and width... other than default of align="center".
<caption>...</caption> The <caption> tag immediately follows the <table> tag, it does not go inside the table row tags or cells. Only text can appear in a caption. Captions are horizontally centered with respect to the table, and their lines are wrapped to fit within the width of the table. The <caption> tag accepts the attributes of align.(top,bottom,left or right - not center).

Note to self: notice the cellspacing and cellpadding is different on both tables. AS well as the use of the caption tag...it is with this one notices the cellspacing differences. Also if you look closely the valign is used in some of the cells in the tables...top...bottom.

Basic Table Attributes
Table Parts How to Use
align="(top/bottom/left/center/right)"

 

Heading image.

When you use the align attribute with the <caption> tag, specify align="top" or align="bottom" to control whether the caption appears above or below the table. The default alignment of the caption is "top".

When you use align inside of a <table>, <tr>, <th>, or <td> tag, align accepts values of left, center, or right to control the horizontal placement of text within the cells. The default value of align for these tags is left.

border="number" You use the border attribute in the <table> tag to instruct the browser to display borders around the table and all the table cells. Space is left for borders around tables so the tables width does not change when a border is added. If no number is specified, border defaults to a width of one (1).
cellpadding="number" When used within the <table> tag, the cellpadding value indicates the amount of space between the border of a cell and the contents of the cell. The default value is one pixel. Setting the cell padding to zero on a table with borders causes the text to touch the border. Padding cells can help you greatly enhance the visual impact of your tables, especially when you couple the padding with cell spacing and border sizing.
cellspacing="number" You use the cellspacing attribute within the <table> tag to represent the amount of space inserted between individual cells in a table. The default value is two pixels between cells. Couple this with the cellpadding attribute and you can really make interesting looking tables.
width="(number/percent)" You can use the width attribute inside the <table> tag to set the width of the table as an absolute width in pixels or as a percentage of the browser display area.

When you use the width attribute in the <th> or <td> tag, you set the width of the cell as an absolute width in pixels or as a percentage of the table width.

valign="(top/middle/bottom/baseline)" The valign (vertical alignment) attribute is used inside a <tr>, <th>, or <td> tag to control the placement of the cell's contents at the top, middle, or bottom of the cell or to align all elements with a common baseline.
nowrap When you use the nowrap in a table cell (<td> or <th>), the nowrap attribute forces the browser to display all of the text for that  particular cell on a single line. Using this attribute can cause very wide cells, so be careful.
colspan="number" Use colspan in any table cell to specify how many columns of the table the cell should span if you want to span more than the default of one cell.
rowspan+"number" Use rowspan in any table cell to specify how many rows of the table the cell should span if you want to span more than the default of one cell.

back a page.    Next page.

Html 201-Tables Lessons Html 101 Lessons WebTech University Html 201-Frames Lessons Html 201-Forms Lessons