TABLES IN HTML No, not that kind of table!! THIS KIND!!
Why use tables on a web page? Easier to align data, even with a border of 0 Organized and neat Easy to read
To add a table To do a table, you must have a beginning and ending table tag <table> </table>
For example: <html> <head><title>Tables</title></head> <body> <table border=“1”> <tr>This is row 1</tr> </table> </body> </html>
Table Borders Add border=“n” if you wish to include a border around your table and its cells. Even if you don’t want a border, you should still include the border tab at 0. Instead of <table> use <table border=“1”> </table> Wait until you master tables before trying one without a border
<table border=“2”> Table Rows Each row has a beginning and ending tag <tr> </tr> <table border=“2”> <tr> </tr> </table>
Cells / Columns To make another column you create a separate cell with the <td> tag (ending tag also </td>) <table border=“3”> <tr><td bgcolor=“#ff8000” font color=“#804000”> column 1</td> <td>column 2</td> <td>column 3</td> </tr> </table>
Heading Cells If you want your columns to have labels or column headings, use the table heading tags These will center and bold your headings in the middle of your columns <table border=“3”><tr> <th>Heading 1></th> <th>Heading 2</th><th>Heading 3</th> </tr> </table> U:\Lburgess\my web pages\my favorites.html
Table Span To make the table go all the way across the page, put in a width code in the initial table tag Example: <table border=“1” width=“100%”>
Changing Text Alignment in a Cell You can change the text alignment to left, center or right. And, you can change the text alignment to top, middle or bottom of the cell. To do so, you add an alignment tag to your column tag <td> <td align=“center”> <td valign=“top”> <tr align> works also, but affects the entire row
Your Turn Create a three column, three row table with a header row. You will need to set the width to 100% to cover the entire page. Center align your text within the second column. Your table should contain Disney character names in the first column, the name of the movie they are from in the second column, and an image of the character in the third column. HINT: <img src> code goes in place of the text in column 3
Let’s Review To add a border to your table <table border=“#”> To create a table without a border <table border=“0”> <tr> </tr> defines a row <td> </td> defines a column To center text within a cell of a table <td align=“center”> To make a table go across the entire page, use the width attribute <table width=“100%”>
Let’s Review To create a heading for your columns <th> replaced <td> on first row To vertically align the text in cells use valign <td valign=“center”> To add a hyperlink inside the table <td><a href=“http://www.websiteaddress.com”> website address</a></td> To add a picture inside a table <td><img src=“picture.jpg”></td>
Make a padded Tic-Tac-Toe Board What will this table look like? <table border=“1”> <tr><th>Col 1</th><th>Col 2</th><th>Col 3</th></tr> <tr><td>X</td><td>X</td><td>X</td></tr> </table>
To increase the amount of space between cells or between text and cells To add space between the cell wall and the text <table border=“1” cellpadding=“#”> To add space between cells <table border=“1” cellspacing=“#”> The # represents pixels of space
Let’s add some room to the Tic-Tac-Toe Board <table border=“1” cellpadding=“10”> <tr><th>Col 1</th><th>Col 2</th><th>Col 3</th></tr> <tr><td>X</td><td>X</td><td>X</td></tr> </table> <table border=“1” cellpadding=“10” cellspacing=“10”> <tr><th>Col 1</th><th>Col 2</th><th>Col 3</th></tr> <tr><td>X</td><td>X</td><td>X</td></tr> </table>
Changing Row Span or Column Span You can span more than one row or more than one column Adding rowspan to a td tag will “take over” more than one row <rowspan=“2”> Adding colspan to a td tag will span more than one column <colspan=“2”>
This is an example of a rowspan of 2.
This is an example of a column span of 2.
Practice Row/Column Span Look on p. 189 of keyboarding textbook See if you can duplicate the table which appears in Activity 2 on Major League Baseball
Designing a Table You should absolutely draw your table on paper first to see what you want it to look like before creating your html document. Once you draw your table on paper, then you will be able to see what type of tags you will need.
What if you want links inside your table? To create a table that looks like this one And links to those web pages CBS Home Page WPHS Home Page The tags would be as follows <tr><td align=“center”> <a href=http://www.cbs.com>CBS Home Page </a></td> What would the WPHS Tag look like?