HTML Lecture Part 2 of 2
2 likes817 views
The document provides an overview of HTML table elements, including definitions and attributes for creating tables, rows, and cells. It covers essential attributes like bgcolor, cellpadding, cellspacing, colspan, and rowspan, along with examples of how to implement these features in HTML. Additional resources for learning about HTML tables and web design are also mentioned.
HTML Lecture Part 2 of 2
- 2. Using Tables
- 3. Table Tags • <table>Content Here</table> • Creates the table • <tr>Content Here</tr> • Defines each row of the table • <td>Content Here</td> • Defines the content (data) contained within each cell of the table • <th>Content Here</th> • Used to create headers for rows and/or columns
- 4. Commonly Used Attributes • bgcolor • cellspacing • Defines the background color for an entire table, an • Defines the space between cells entire row or a single cell • <table cellspacing="10">Content Here</table> • Table • • <table bgcolor="#ffff00">Content Here</table> • cellpadding Row • Defines the space within a cell between the content • <tr bgcolor="#ffff00">Content Here</tr> and the cell wall • Data Cell • <table cellpadding="10">Content Here</table> • <td bgcolor="#ffff00">Content Here</td> • Header Cell • colspan • <th bgcolor="#ffff00">Content Here</th> • Defines how many columns a cell should take up • How many cells across • border • <th colspan="2">Content Here</th> • Defines your table’s border • <td colspan="5">Content Here</td> • <table border="2">Content Here</table> • rowspan • bordercolor • Defines how many rows a cell should take up • Defines the color of your table’s border • How many cells down • <table bordercolor="#ffff00">Content Here</table> • <th rowspan="4">Content Here</th> • <td rowspan="3">Content Here</td>
- 5. Putting it to Work <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http:// www.w3.org/TR/html4/strict.dtd"> <html> <title>Using Tables</title> <body> <table border="2" bordercolor="#669999"> <tr><td bgcolor="ffff00"> </td> <th>Monday</th> <th>Tuesday</th> <th><font face="impact" font color =#336699>Wednesday</ font></th> </tr> <tr><th>9:00 AM - 10:00 AM</th> <td>Web Publishing</td> <td>Graphic Design II</td> <td>Algebra II</td> </tr> <tr><th>1:00 PM - 2:00 PM</th> <td>Web Publishing</td> <td>English Comp.</td> <td>Algebra II</td> </tr> <tr><th><font face="verdana" color="#660000">1:00 PM - 2:00 PM</th> <td><i>Web Publishing</i></td> <td><font color="#330066">Graphic Design II</font></td> <td><font face="mistral">English Comp.</td> </tr> </table> </body> </html>
- 6. Now Add Cellpadding & Cellspacing <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http:// www.w3.org/TR/html4/strict.dtd"> <html> <title>Using Tables</title> <body> <table border="2" bordercolor="#669999" cellpadding="10" cellspacing="20"> <tr><td bgcolor="ffff00"> </td> <th>Monday</th> <th>Tuesday</th> <th><font face="impact" font color =#336699>Wednesday</ font></th> </tr> <tr><th>9:00 AM - 10:00 AM</th> <td>Web Publishing</td> <td>Graphic Design II</td> <td>Algebra II</td> </tr> <tr><th>1:00 PM - 2:00 PM</th> <td>Web Publishing</td> <td>English Comp.</td> <td>Algebra II</td> </tr> <tr><th><font face="verdana" color="#660000">1:00 PM - 2:00 PM</th> <td><i>Web Publishing</i></td> <td><font color="#330066">Graphic Design II</font></td> <td><font face="mistral">English Comp.</td> </tr> </table> </body> </html>
- 7. Now Add Colspan & Rowspan <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <title>Using Tables</title> <body text="white"> <table border="2" bordercolor="#669999" cellpadding="10" cellspacing="20"> <tr bgcolor="#999966"><td bgcolor="#ffffcc"> </td> <td colspan="2"><font face="mistral" color="ffffcc" size="8">Vegetables</font></td> <td colspan="2"><font face="mistral" color="ffffcc" size="8">Fruits</font></td> </tr> <tr bgcolor="#CC0000"><td rowspan="2"><font color="ffffcc" size="5" face="impact">Red</font></td> <td>Red Peppers</td> <td>Radishes</td> <td>Strawberries</td> <td>Apples</td> </tr> <tr bgcolor="#CC0000"><td>Red Cabbage</td> <td>Beets</td> <td>Cherries</td> <td>Raspberries</td> </tr> <tr bgcolor="#00CC66"><td rowspan="2"><font color="ffffcc" size="5" face="impact">Green</font></td> <td>Spinach</td> <td>Asparagus</td> <td>Grapes</td> <td>Lime</td> </tr> </table> </body> </html>
- 10. Default=No Border • By default, tables do not have borders <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <title>Working With Tables</title> <body> <table> <tr><td>apples</td> <td>oranges</td></tr> <tr><td>bananas</td> <td>pineapples</td></tr> </table> </body> </html> • Borders are measured in pixels <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <title>Working With Tables</title> <body> <table border="3"> <tr><td>apples</td> <td>oranges</td></tr> <tr><td>bananas</td> <td>pineapples</td></tr> </table> </body> </html>
- 11. Commonly Used Frame and Rules Attributes • frame • Defines which outside borders are visible • Values • void—no outer border • <table border=2 frame=void rules=all> • box—borders should appear on all four sides; box is often used with rules="none" • <table border=1 frame=box rules=none> • rules • Defines which inside borders are visible • Values • none—no inside borders • all—all inside borders will appear • cols—only borders between columns will appear • rows—only borders between rows will appear
- 12. More sources http://www.htmlcodetutorial.com/tables/ http://www.tizag.com/htmlT/ http://www.learningnerd.com/series/xhtml-css
- 13. I need more tags! http://cedesign.net/help2j.htm http://www.w3schools.com/tags/
- 15. Web-Safe Colors http://ficml.org/jemimap/style/color/wheel.html http://www.webmonkey.com/reference/Color_Charts