Directions:
Read the following introduction and send me an email answering the following questions in complete sentence form.
1. What is does the td tag <td> stand for? What type of information can be put into this type of cell?
2. What would your entry in TextEdit look like if you wanted to create a table with a "2" pixel border?
HTML Tables
Tables are used on websites for two major purposes:
- The obvious purpose of arranging information in a table
- The less obvious - but more widely used - purpose of creating a page layout with the use of hidden tables.
Tables are defined with the <table> tag.
A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
Table Example
| <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> |
How the HTML code above looks in a browser:
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
HTML Tables and the Border Attribute
If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show.
To display a table with borders, specify the border attribute:
| <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table> |
HTML Table Headers
Header information in a table are defined with the <th> tag.
All major browsers will display the text in the <th> element as bold and centered.
| <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> |
How the HTML code above looks in your browser:
| Header 1 | Header 2 |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
No comments:
Post a Comment