Computer Science Canada

Tables
Author:  stef_ios [ Tue Feb 06, 2007 8:18 pm ]
Post subject:  Tables
I am writing in XHTML and I do not know how to write code for a table. It is three rows and three columns, and there is writing in each cell. If someone could help get me started that would be great. Thanks! Very Happy

P.S. I am a noobie at XHTML and even though I know HTML, I have never done a table before. Confused
Author:  Amailer [ Tue Feb 06, 2007 8:42 pm ]
Post subject:  RE:Tables
http://www.w3schools.com/tags/tag_table.asp

Check w3schools Very Happy
Author:  stef_ios [ Wed Feb 07, 2007 2:24 pm ]
Post subject:  Re: Tables
Thanks!! That really did help. I used w3schools before, but i couldn't find that page. Confused Thanks! Very Happy
Author:  stef_ios [ Wed Feb 07, 2007 3:01 pm ]
Post subject:  Re: Tables
Ok, another question now. Here is my code. Now the problem I am running into is that I cannot get the cells spaced out. This is my code.

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
        <title>Mr. Henrich's Class Schedule</title>
</head>

<body>

<h4 align="center">Mr. Henrich's Class Schedule</h4>

<table border="1" bgcolor="#DA70D6" cellpadding="10">
        <tr>
                <th>Class</th>
                <th>Room</th>
                <th>Time</th>
        </tr>
        <tr>
                <td align="center">GLC201-01</td>
                <td align="left">1st Floor, Room 101</td>
                <td align="left">8:25 AM to 9:45 AM</td>
        </tr>
        <tr>
                <td align="center">ICE4M1-01</td>
                <td align="left">2nd Floor, Room 224</td>
                <td align="left">12:10 PM to 1:25 PM</td>
        </tr>
        <tr>
                <td align="center">ICS4M1-01</td>
                <td align="left">2nd Floor, Room 224</td>
                <td align="left">12:10 PM to 1:25 PM</td>
        </tr>
        <tr>
                <td align="center">ICE3M1-01</td>
                <td align="left">2nd Floor, Room 224</td>
                <td align="left">1:25 PM to 2:45 PM</td>
        </tr>
</table>

</body>

</html>


I don't know what the code looks like to make the cells longer horizontally. They are stubby little boxes right now. Also, I do not know how to get the cell borders to have their own colour. The colour should be #000000 for the text and #FF1493 for the border. I do not know how to chang ethe colour of the border though. I cannot find the code for those two parts either, so any help I can get would be great! Thanks!
Author:  Amailer [ Wed Feb 07, 2007 4:28 pm ]
Post subject:  RE:Tables
You CAN just do width="x%" for each <td>, but then it would come up as invalid XHTML. So, you have to use CSS

You can make a simple CSS id for TD width like:
css:
#width10 {
width: 10px;
}


and then give that TD that id
HTML:
<td id="width10">...</td>


Or line in the way they show at w3.org Very Happy

**EDIT** Wow, whats with me and the URL bbcode oO
Author:  stef_ios [ Wed Feb 07, 2007 4:43 pm ]
Post subject:  Re: Tables
Where in the code do I put that first bit of code? I'm not too sure. It's saying dialogue error.
Author:  Amailer [ Wed Feb 07, 2007 4:51 pm ]
Post subject:  RE:Tables
You can do it this way, in your <head></head> tags put:
HTML:
<style type="text/css" media="screen">
#width10 {
width: 10px;
}
</style>


Or you could include a .css file using:
HTML:
<link rel="stylesheet" href="path/to/my.css" type="text/css">


In that (my.css) you just put
css:
#width10 {
width: 10px;
}
Author:  stef_ios [ Wed Feb 07, 2007 5:18 pm ]
Post subject:  Re: Tables
Another question now. So the background colour is perfect. But now I need to make the border colour of the cells different. The bottom and right borders of each cell are red, and the top and left borders are black. How do I do this, because w3schools doesn't say. Thanks.
Author:  Amailer [ Wed Feb 07, 2007 5:44 pm ]
Post subject:  RE:Tables
With CSS use background-color: #code;
Author:  stef_ios [ Wed Feb 07, 2007 5:58 pm ]
Post subject:  Re: Tables
How exactly do I do that? I really suck at this stuff Confused Sad
Author:  Amailer [ Wed Feb 07, 2007 6:15 pm ]
Post subject:  RE:Tables
Look up CSS background-color on google Very Happy For background images, background-image:
Author:  stef_ios [ Thu Feb 08, 2007 5:13 pm ]
Post subject:  Re: Tables
I have another table now. For this one I can't seem to get it to pass the validation at http://validator.w3.org. Here is the code.

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
        <title>My Very Own Table!</title>

<style type="text/css" media="screen">
#width950 {
width: 950px;
border-style: solid;
border-color: #FFFFFF;
color: #FFFFFF;
}

</style>

</head>

<body>

<h3 align="center"><u>Immigration and Emigration (1981-2001 Censuses)</u></h3>

<table border="1" bgcolor="#000000" id="width950">
        <tr>
                <th><b>Year</b><a href="http://www40.statcan.ca/l01/cst01/demo03.htm" target="_blank">
                                <img border="0" src="calendar.gif" width="50" height="50" alt="calendar"></th>
                <th><b>Immigration</b><a href="http://www.cic.gc.ca/" target="_blank">
                                <img border="0" src="immigration.gif" width="50" height="50" alt="immigration"></th>
                <th><b>Emigration</b><a href="http://en.wikipedia.org/wiki/Emmigration" target="_blank">
                                <img border="0" src="emigration.gif" width="50" height="50" alt="emigration"></th>
        </tr>
        <tr>
                <td align="center">1981-1986</td>
                <td align="center">678</td>
                <td align="center">278</td>
        </tr>
        <tr>
                <td align="center">1986-1991</td>
                <td align="center">1,164</td>
                <td align="center">213</td>
        </tr>
        <tr>
                <td align="center">1991-1996</td>
                <td align="center">1,118</td>
                <td align="center">338</td>
        </tr>
        <tr>
                <td align="center">1996-2001</td>
                <td align="center">1,217</td>
                <td align="center">376</td>
        </tr>
</table>

</body>

</html>


I do not understand what the validator is telling me. Can someone please explain?
Author:  rdrake [ Thu Feb 08, 2007 5:54 pm ]
Post subject:  Re: Tables
You must close all of your tags, like so:
code:
        <tr>
        <th><b>Year</b><a href="http://www40.statcan.ca/l01/cst01/demo03.htm" target="_blank">
                                <img border="0" src="calendar.gif" width="50" height="50" alt="calendar" /></a></th>
Notice how I placed the " />" at the end of the image tag, and added the < / a > tag after the end of your image tag? It should now be valid, though I did not test it yet.
Author:  Amailer [ Thu Feb 08, 2007 9:26 pm ]
Post subject:  RE:Tables
Also I noticed your validating by xhtml1-transitional, so that would allow you to use the bgcolor value (if Im correct, not 100% sure) in your table tags:
code:
<table border="1" bgcolor="#000000" id="width950">


but if it was strict, that wouldn't be allowed (hm, I always thought you were using strict, sorry xD no need for that css really if you aren't Razz you could have just put it right into the html)
Author:  stef_ios [ Fri Feb 09, 2007 3:59 pm ]
Post subject:  Re: Tables
Thanks for all the help!! It passed the validation!! Yay! Thanks alot!!

:


You can syndicate this boards posts using the file backend.php or view the topic map using sitemap.php.

Terms of Use | Privacy Policy