2
(X)HTML: The Basics
Using Tables
Table Tags
•   <table>Content Here</table>
    •   Creates the table


•   <tr>Content Here</tr>
    •   Defines each row o...
Commonly Used Attributes
•   bgcolor                                                   •   cellspacing
    •   Defines the ...
Putting it to Work
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://
www.w3.org/TR/html4/strict.dtd">
<html>
<tit...
Now Add Cellpadding & Cellspacing
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://
www.w3.org/TR/html4/strict.dt...
Now Add Colspan & Rowspan
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html...
More About Borders
Default=No Border
• By default, tables do not have borders
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://w...
Commonly Used Frame and Rules Attributes
•   frame
    •   Defines which outside borders are visible
    •   Values
       ...
More sources
   http://www.htmlcodetutorial.com/tables/
          http://www.tizag.com/htmlT/
http://www.learningnerd.com/...
I need more tags!
     http://cedesign.net/help2j.htm
    http://www.w3schools.com/tags/
Web-Safe Fonts
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
Web-Safe Colors
     http://ficml.org/jemimap/style/color/wheel.html
 http://www.webmonkey.com/reference/Color_Charts
HTML Lecture Part 2 of 2
Upcoming SlideShare
Loading in …5
×

HTML Lecture Part 2 of 2

1,103 views

Published on

This is Part 2 of a two-lecture series on implementing HTML. I created this lecture in an effort to keep my design students from "fearing the code" they encounter in an introductory level course to Dreamweaver and Web Site design.

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,103
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
77
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML Lecture Part 2 of 2

  1. 1. 2 (X)HTML: The Basics
  2. 2. Using Tables
  3. 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. 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. 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">&nbsp;</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. 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">&nbsp;</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. 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">&nbsp;</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>
  8. 8. More About Borders
  9. 9. 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>
  10. 10. 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
  11. 11. More sources http://www.htmlcodetutorial.com/tables/ http://www.tizag.com/htmlT/ http://www.learningnerd.com/series/xhtml-css
  12. 12. I need more tags! http://cedesign.net/help2j.htm http://www.w3schools.com/tags/
  13. 13. Web-Safe Fonts http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
  14. 14. Web-Safe Colors http://ficml.org/jemimap/style/color/wheel.html http://www.webmonkey.com/reference/Color_Charts

×