Html Tables
Upcoming SlideShare
Loading in...5
×
 

Html Tables

on

  • 109 views

 

Statistics

Views

Total Views
109
Views on SlideShare
109
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html Tables Html Tables Presentation Transcript

  • 2(X)HTML: The Basics
  • Using Tables
  • TableTags • <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
  • Commonly Used Attributes • bgcolor • Defines the background color for an entire table, an entire row or a single cell • Table • <table bgcolor="#ffff00">Content Here</table> • Row • <tr bgcolor="#ffff00">Content Here</tr> • Data Cell • <td bgcolor="#ffff00">Content Here</td> • Header Cell • <th bgcolor="#ffff00">Content Here</th> • border • Defines your table’s border • <table border="2">Content Here</table> • bordercolor • Defines the color of your table’s border • <table bordercolor="#ffff00">Content Here</table> • cellspacing • Defines the space between cells • <table cellspacing="10">Content Here</table> • cellpadding • Defines the space within a cell between the content and the cell wall • <table cellpadding="10">Content Here</table> • colspan • Defines how many columns a cell should take up • How many cells across • <th colspan="2">Content Here</th> • <td colspan="5">Content Here</td> • rowspan • Defines how many rows a cell should take up • How many cells down • <th rowspan="4">Content Here</th> • <td rowspan="3">Content Here</td>
  • <!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> 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" 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> 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 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> Now Add Colspan & Rowspan
  • More About Borders
  • 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>
  • 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
  • More sources http://www.htmlcodetutorial.com/tables/ http://www.tizag.com/htmlT/ http://www.learningnerd.com/series/xhtml-css
  • 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