27
Tables with XHTML Please use speaker notes for additional information!
| Date post: | 04-Jan-2016 |
| Category: |
Documents |
| Upload: | amberlynn-pearson |
| View: | 216 times |
| Download: | 0 times |
Tables with XHTML
Please use speaker notes for additional information!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trnasitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Start looking at TABLES</title></head><body><h2>This web page is going to introduce tables.</h2><table> <tr> <td>First row, first column</td> <td>First row, second column</td> </tr> <tr> <td>Second row, first column</td> <td>Second row, second column</td> </tr></table><h4>The problem is, this doesn't look much like a table because there aren'tany borders around it.</h4><p>Now lets take the same table and put the BORDER attribute in the TABLE designation to make it look more like a table.</p><table border="1"> <tr> <td>First row, first column</td> <td>First row, second column</td> </tr> <tr> <td>Second row, first column</td> <td>Second row, second column</td> </tr></table><p>Now let's say that we want this aligned in the center of the screen insteadof against the left wall. This can be accomplished by using the DIV which is used to make a division in the formatting. Note that you must also closethe division or the center alignment will continue past the table.</p>
The table tag specifies that we using a table structure to show the data.
The tr tag specifies a row in the table
The td tag is for table data - it is essentially a cell of data.
<div align="center"><table border="1"><tr> <td>First row, first column</td> <td>First row, second column</td> </tr> <tr> <td>Second row, first column</td> <td>Second row, second column</td> </tr></table></div><p>You now have a table that is in the center of the screen.</p></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Start looking at TABLES using XHTML</title><style type="text/css">div { text-align: center; }table { border: solid thin; }td { border: solid thin; }</style></head><body><h2>This web page is going to introduce tables.</h2><p>I am setting up borders in the CSS because two of my tables need borders. I can useinline style to set the borders to none for the table where I do not want borders toappear.</p><table style="border:none;"> <tr> <td style="border:none;">First row, first column</td> <td style="border:none;">First row, second column</td> </tr> <tr> <td style="border:none;">Second row, first column</td> <td style="border:none;">Second row, second column</td> </tr></table><h4>The problem is, this doesn't look much like a table because there aren'tany borders around it.</h4>
This style establishes the style for the page. Divisions will be centered and the output of the table tag and the td tag will have a solid thin border.
Here I am using inline style to override the style in the header and establish no borders on the table and td tags.
<p>Now I am going to use the CSS settings to put borders on the table and on theindividual cells (td for table data).</p><table> <tr> <td>First row, first column</td> <td>First row, second column</td> </tr> <tr> <td>Second row, first column</td> <td>Second row, second column</td> </tr></table><p>Now let's say that we want this aligned in the center of the screen insteadof against the left wall. This can be accomplished by using the DIV which is used to make a division in the formatting. Note that you must also closethe division or the center alignment will continue past the table. The centerattribute is set in the CSS for div.</p><div><table> <tr> <td>First row, first column</td> <td>First row, second column</td> </tr> <tr> <td>Second row, first column</td> <td>Second row, second column</td> </tr></table></div><p>You now have a table that is in the center of the screen.</p></body></html>
<style type="text/css">div { text-align: center; }
The setting of text-align center for the division means that the table within the division will be aligned to the center.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trnasitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Continue looking at TABLES</title></head><body><h2>This web page is going to continue looking at tables.</h2><h4>Now lets look at putting captions on the table and on the columns:</h4><p>A caption on the whole table is done with the CAPTION command. Note thatthe caption can be either at the top or bottom of the table (ALIGN=BOTTOM puts the caption underneath the table). The TH command creates column headers.</p><table border="1"> <caption> This is the sample table complete with caption</caption> <tr> <th>COLUMN #1</th> <th>COLUMN #2</th> </tr> <tr> <td>First row, first column</td> <td>First row, second column</td> </tr> <tr> <td>Second row, first column</td> <td>Second row, second column</td> </tr></table><br /><br />
<table border="1"> <caption align="bottom"> This is the sample table complete with caption</caption> <tr> <th>ROW #S</th> <th>COLUMN #1</th> <th>COLUMN #2</th> </tr> <tr> <th>First row</th> <td>First row, first column</td> <td>First row, second column</td> </tr> <tr> <th>Second row</th> <td>Second row, first column</td> <td>Second row, second column</td> </tr></table><br /><p>Notice that things designated with the TH are in bold to stand out asrow and column headers while things designated as TD are not bold - theyare the data.</p><h3>You can alter the BORDER on the table and you can use CELLPADDING toleave a little space inside, between the border and the data in the cell.</h3><table border="5" cellpadding="5"> <tr> <th>COLUMN #1</th> <th>COLUMN #2</th> </tr> <tr> <td>First row, first column</td> <td>First row, second column</td> </tr> <tr> <td>Second row, first column</td> <td>Second row, second column</td> </tr></table>
Note that the th tag can be used outside the first row. In this case I want the left most cell to be a header.
Cellpadding can be used to leave a little space around the data.
<br /><br /><table border="10" cellpadding="10"> <tr> <th>COLUMN #1</th> <th>COLUMN #2</th> </tr> <tr> <td>First row, first column</td> <td>First row, second column</td> </tr> <tr> <td>Second row, first column</td> <td>Second row, second column</td> </tr></table><h3>Notes on data alignment options</h3><ul><li>If you use an ALIGN (LEFT, RIGHT, CENTER) clause within the TR, the data within that row will be horizontally aligned</li><li>If you want to use vertical alignment than use the VALIGN clausewithin the TR</li><li>You can also use ALIGN with TOP or BOTTOM within the TD</li></ul><table border="1"> <caption align="bottom"> This is the sample table complete with caption </caption> <tr align="center"> <th>ROW #S</th> <th>COLUMN #1</th> <th>COLUMN #2</th> </tr> <tr> <th>First row</th> <td>1,1</td> <td>1,2</td> </tr>
<tr> <th>Second row</th> <td align="center">2,1</td> <td>2,2</td> </tr> <tr align="center"> <th>Third row</th> <td>3,1</td> <td>3,2</td> </tr></table></body></html>
Remember that is it very important to test your code in a variety of browsers. Even if code pases the XHTML test, it may not be implement by a particular browser. In this case, Explorer 6 has not implemented the ability to put the caption at the bottom.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Continue looking at TABLES</title><style type="text/css">table { border: solid thin; }td { border: solid thin; }</style></head><body><h2>This web page is going to continue looking at tables.</h2><h4>Now lets look at putting captions on the table and on the columns:</h4><p>A caption on the whole table is done with the CAPTION command. Note thatthe caption can be either at the top or bottom of the table (ALIGN=BOTTOM puts the caption underneath the table). The TH command creates column headers.</p><table> <caption> This is the sample table complete with caption</caption> <tr> <th>COLUMN #1</th> <th>COLUMN #2</th> </tr> <tr> <td>First row, first column</td> <td>First row, second column</td> </tr> <tr> <td>Second row, first column</td> <td>Second row, second column</td> </tr></table></body></html>
table { border: solid thin; caption-side: bottom; }This is a way to put the caption at the bottomthat is currently unsupported in Explorer.
The caption is shown at the bottom of the table in this viewing through Netscape.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Continue looking at TABLES</title><style type="text/css">table { border: solid thin; caption-side: bottom; }td { border: solid thin; }</style></head><body><h2>This web page is going to continue looking at tables.</h2><h4>Now lets look at putting captions on the table and on the columns:</h4><p>A caption on the whole table is done with the CAPTION command. Note thatthe caption can be either at the top or bottom of the table (ALIGN=BOTTOM puts the caption underneath the table). The TH command creates column headers.</p><table> <caption> This is the sample table complete with caption</caption> <tr> <th>COLUMN #1</th> <th>COLUMN #2</th> </tr> <tr> <td>First row, first column</td> <td>First row, second column</td> </tr> <tr> <td>Second row, first column</td> <td>Second row, second column</td> </tr></table></body></html>
This shows the code that puts the caption at the bottom in some browsers. If it is not supported, the default of caption at the top is executed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Continue looking at TABLES</title><style type="text/css">table { border: solid thick; padding: 10; }td, th { border: solid thin; }</style></head><body><h2>This web page is going to continue looking at tables.</h2><h3>You can alter the BORDER on the table and you can use CELLPADDING toleave a little space inside, between the border and the data in the cell.</h3><table> <tr> <th>COLUMN #1</th> <th>COLUMN #2</th> </tr> <tr> <td>First row, first column</td> <td>First row, second column</td> </tr> <tr> <td>Second row, first column</td> <td>Second row, second column</td> </tr></table><p> <br /></p>
In this example the default for borders is solid and thck with a padding (cellpadding) of 10.
<table style="border: solid thick black;" > <tr> <th style="padding:20;">COLUMN #1</th> <th style="padding:20;">COLUMN #2</th> </tr> <tr> <td style="padding:20;">First row, first column</td> <td style="padding:20;">First row, second column</td> </tr> <tr> <td style="padding:20;">Second row, first column</td> <td style="padding:20;">Second row, second column</td> </tr></table><p> <br /></p><table border="1"> <caption> This is the sample table complete with caption</caption> <tr style="text-align:center;"> <th>ROW #S</th> <th>COLUMN #1</th> <th>COLUMN #2</th> </tr> <tr> <th>First row</th> <td>1,1</td> <td>1,2</td> </tr> <tr> <th>Second row</th> <td style="text-align=center;">2,1</td> <td>2,2</td> </tr> <tr style="text-align: right;"> <th>Third row</th> <td>3,1</td> <td>3,2</td> </tr></table></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Mrs. Grocer's Schedule Page</title></head><body><a name="top"></a><table border="4" cellpadding="5" align="left" width="100%"><caption><b>If I am not in my office, please check the computer labs.</b></caption> <tr><th colspan="6">MRS. GROCER'S SCHEDULE - OFFICE: K112</th></tr> <tr> <td width="10%"> <i>HOURS</i> </td> <td width="20%"> <i>MONDAY</i> </td> <td width="20%"> <i>TUESDAY</i> </td> <td width="10%"> <i>WEDNESDAY</i> </td> <td width="20%"> <i>THURSDAY</i> </td> <td width="20%"> <i>FRIDAY</i> </td> </tr> <tr> <td>8:00<br />To<br />8:52 </td> <td>NOT ON CAMPUS </td> <td>NOT ON CAMPUS </td> <td rowspan="11"> NOT ON CAMPUS </td> <td>NOT ON CAMPUS </td> <td>NOT ON CAMPUS </td> </tr> <tr> <td>9:00<br />To<br />9:52 </td> <td>WEB OFFICE HOUR<br />BY APPT<br />Sometimes need to reschedule due to conflicts with on campus committments </td> <td>CIS 17<br />K-201 </td> <td>CIS 17<br />K-201 </td> <td>CIS 17<br />K-205 </td> </tr>
<tr> <td>10:00<br />To<br />10:52 </td> <td>NOT ON CAMPUS </td> <td>CIS47<br />K-201 </td> <td>CIS47<br />K-201 </td> <td>CIS47<br />K-203 </td> </tr> <tr> <td>11:00<br />To<br />11:52 </td> <td rowspan="2"> SOMETIMES AVAILABLE</td> <td>OFFICE HOUR </td> <td>OFFICE HOUR </td> <td>OFFICE HOUR<br />BY APPT </td> </tr> <tr> <td>12:00<br />To<br />12:52 </td> <td>CIS 50<br />K-232 </td> <td>CIS 50<br />K-201 </td> <td>CIS 50<br />K-232 </td> </tr> <tr> <td>1:00<br />To<br />1:52 </td> <td rowspan="2"> USUALLY AVAILABLE </td> <td>CIS 44<br />K-105 </td> <td rowspan="2"> CIS44<br />K-205 </td> <td rowspan="2">MEETINGS<br />OR<br />AVAILABLE </td> </tr> <tr> <td>2:00<br />To<br />2:52 </td> <td>OFFICE HOUR<br />BY APPT </td> </tr> <tr> <td>3:00<br />To<br />3:52</td> <td>MEETINGS<br />OR<br />AVAILABLE</td> <td rowspan="4"> 3:30 - 6:40<br />CIS67<br />K-201</td> <td>OFFICE HOUR<br />BY APPT </td> <td rowspan="3"> SOMETIMES AVAILABLE </td>
</tr> <tr> <td>4:00<br />To<br />4:52</td> <td rowspan="2">FREQUENTLY<br />AVAILABLE</td> <td rowspan="2">SOMETIMES AVAILABLE </td> </tr> <tr> <td>5:00<br />To<br />5:52 </td> </tr> <tr> <td>6:00<br />To<br />6:40</td> <td>NOT AVAILABLE</td> <td>NOT AVAILABLE</td> <td>NOT AVAILABLE</td> </tr> <tr> <td colspan="6"><b>EVENINGS AND WEEKENDS:</b> I am usually available evenings and weekends for Web Consultation. You can make a Web Office Hour Appointment with me on evenings or weekend via email - please use the email address given out in class.</td> </tr> <tr> <td colspan="6">Send e-mail to Mrs. Grocer :<br /> <a href="mailto:[email protected]">[email protected]</a></td> </tr> <tr> <td colspan="6"><a href="#top">Back to the Top</a><br /> <a href="http://www.pgrocer.net/index.html">Return to home page</a><br /> </td> </tr></table><br /></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Mrs. Grocer's Schedule Page</title><style type="text/css">table { border: solid thin; padding: 5; width: 100%; }td { border: solid thin; width: 20%; }th { border: solid thin; }</style></head><body><div><a id="top"></a></div><table><caption><b>If I am not in my office, please check the computer labs.</b></caption> <tr><th colspan="6">MRS. GROCER'S SCHEDULE - OFFICE: K112</th></tr> <tr> <td style="width: 10%;"> <i>HOURS</i> </td> <td><i>MONDAY</i> </td> <td><i>TUESDAY</i> </td> <td style="width: 10%;"> <i>WEDNESDAY</i> </td> <td><i>THURSDAY</i> </td> <td><i>FRIDAY</i> </td> </tr>
<style type="text/css">table { border: solid thin; border-color: lime; background-color: beige; padding: 5; width: 100%; }td { border: solid thin; width: 20%; }th { border: solid thin; }</style>
