Html Tables
15
Click here to load reader
-
Upload
abdul-waqar -
Category
Education
-
view
38 -
download
0
description
Transcript of Html Tables
2(X)HTML: The Basics
Using Tables
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
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"> </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"> </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"> </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 sourceshttp://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 Fontshttp://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
Web-Safe Colorshttp://ficml.org/jemimap/style/color/wheel.html
http://www.webmonkey.com/reference/Color_Charts
