Tables *Note: Nothing in Volcano!* 016 1
Learning Objectives After this lesson you will be able to Design a web page table with rows and columns of text in a grid display Write the HTML for integrated layout schemes of text and pictures Write the HTML for an invisible table that creates side-by-side columns Create a table that has different colored cells Create a table that uses images as backgrounds in table cells 2
Tables Provide a structure for organizing other HTML elements into "grids" on the page HTML for tables can look very complex Keep in mind this concept Tables start being built From the top left Then across the columns of the first row Then to the second row Across the columns of the second row... --> --> --> --> --> --> --> --> --> --> 3
Basic Table Tags Are on Left Resulting Table in Right Column <table border=1> <tr> <td>row 1 col 1</td> <td>row 1 col 2</td> <td>row 1 col 3</td> </tr> <tr> <td>row 2 col 1</td> <td>row 2 col 2</td> <td>row 2 col 3</td> </tr> <tr> <td>row 3 col 1</td> <td>row 3 col 2</td> <td>row 3 col 3</td> </tr> </table> Row 1 col 1 Row 2 col 1 Row 3 col 1 Row 1 col 2 Row 2 col 2 Row 3 col 2 Row 1 col 3 Row 2 col 3 Row 3 col 3 4
Basic Table Tags Border=1 attribute instructs browser to draw a line around the table with a thickness of 1 pixel Each row is defined by Table Row tags <tr>...</tr> Cells in each row are defined by Table Data <td>...</td> tags Each <td>...</td> tag can contain any type of HTML tag 5
<td align=left> Horizontal Alignment Default setting Aligns all elements to left side of cell <td align=right> Aligns all elements to right side of cell <td align=center> Aligns all elements to center of cell 6
Vertical Alignment <td valign=middle> Default setting Aligns all elements to middle of cell <td valign=top> Aligns all elements to top of cell <td valign=bottom> Aligns all elements to bottom of cell 7
Combination Can combine these attributes: <td align=left valign=bottom> This HTML will produce a cell with items aligned along the left and bottom of the cell 8
Basic Table Tags Are on Left Resulting Table in Right Column <table border> <tr> <td>row 1 col 1</td> <td align=center colspan=2> Row 1 col 2-3</td> </tr> <tr> <td>row 2 col 1</td> <td>row 2 col 2</td> <td>row 2 col 3</td> </tr> <tr> <td>row 3 col 1</td> <td>row 3 col 2</td> <td>row 3 col 3</td> </tr> </table> Row 1 col 1 Row 2 col 1 Row 3 col 1 Row 1 col 2-3 Row 2 col 2 Row 3 col 2 Row 2 col 3 Row 3 col 3 9
Basic Table Tags Are on Left Resulting Table in Right Column <table border=1> <tr> <td>row 1 col 1</td> <td align=center colspan=2> Row 1 col 2-3</td> </tr> <tr> <td>row 2 col 1</td> <td valign=top rowspan=2> Row 2 col 2</td> <td>row 2 col 3</td> </tr> <tr> <td>row 3 col 1</td> <td>row 3 col 3</td> </tr> </table> Row 1 col 1 Row 2 col 1 Row 3 col 1 Row 1 col 2-3 Row 2 col 2 Row 2 col 3 Row 3 col 3 10
<th>...</th> Table Header Tags Function exactly like the <td>...</td> tags except that any text is automatically made bold and all items are automatically centered 11
Cell Padding <table border=x cellpadding=y cellspacing=z> Where X is the width (in pixels) of the outer border of the table Y value is the attribute cellpadding Specifies how much empty "space" exists between items in the cells and the walls of the cells High values for Y will make the cells larger ("padding the cell) Z value is the attribute cellspacing Specifies (in pixels) the width between the inner lines that divide the cells 12
<caption> tag Places a string of text (centered to the width of the table) as a title/caption for the table <table border=3 cellpadding=4 cellspacing=8> <caption><b><font size=+1> Volumes of Some Well-Known Volcanic Eruptions</font> </b></caption> Can include HTML tags inside the <caption> tag Just makes sure that it is within the <table>...</table> tags 13
Invisible or "Phantom" Tables To the reader it may not be obvious that they are looking at a table A phantom table is built in the same manner except the <table> tag looks like <table border=0> 14
Coloring Tables Table Table Part color the area behind the entire table Row color the area behind a single row Cell color the area behind a single cell HTML <table bgcolor=#880000> <tr bgcolor=#880000> <td bgcolor=#880000> 15
Border Color Add the bordercolor attribute to a <table> tag to shade the colors of a table with visible borders Modify the <table> tag to read <table border=8 cellpadding=8 cellspacing=2 bordercolor="#663300"> 16
Independent Practice: 2 Slides Open index.html and second.html Add one new table with new information to each page created by using the information in this lesson Create a minimum of two (2) tables for a 95 1 table on each page Tables previously created do not count Try creating a table with colored cells Or use the colors on an invisible table to color blocks of areas on a web page Or design what you want 17
Independent Practice: 2 Slides Staple the following items together in order by file name to turn in for grade Open index.html in Internet Explorer and print Open second.html in Internet Explorer and print Circle the minimum of two tables created in the pages Put your name & computer number AND Personal Web 15 on the assignment Turn all in for a grade 18