[nikc121]

So I have never used tables before. I am suppose to make a nested list but use tables. As you can see by my code I have the nested list, and it looks like what its suppose to, but I have no idea how to put it into a table so that I can make colors and fonts using a .css PLEASE help...any guidance would be greatly appreciated. (INTSTRUCTIONS)Table – add a table to input the information.
ii.In the second row – in the left column add the list and nest as follows:
The outer list must have three entries: compact, midsize and sports. Inside each of these three lists,
1.there must be two sublists of body styles.
2.The compact- and midsize-car sublists are two door and four door;
3.the sports-car sublists are coupe and convertible.
1.Each body-style sublist must have at least three entries each of which is the make and model of a particular car that fits the category.
1.The outer list must use Uppercase Roman numerals
2.The middle lists must use Uppercase letters,
3.The inner lists must use Arabic numerals.
1.The text color for the compact-car list must be orange
2.For the mid-size list, it must be green;
3.for the sports car list it must be red.

<ol type ="I">
<li>Compact 
<ol type="A">
<li>Two Door
<ol type="1">
<li>Honda Civic 
<li>Toyota RAV 4 
<li>Volvo C30 
</ol>
<li>Four Door 
<ol type="1">
<li>Mazda 3 </li>
<li>Inifiniti GT-R </li>
<li>Chevrolet Cruze </li>
</li>
</ol>
<li>Midsize 
<ol type="A">
<li>Two Door
<ol type ="1"> 
<li>Nissan Altima </li>
<li>Mercury Milan </li>
<li>Buick LaCrosse </li>
</ol>

<li>Four Door 
<ol type="1">
<li>Chrysler Sebring </li>
<li>BMW 3 </li>
<li>Toyota Camry </li>
</li>
</ol>

<li>Sports 
<ol type="A">
<li>Coupe 
<ol type="1">
<li>Hyundai Genesis</li> 
<li>Peugeot RCZ </li>
<li>Acura ZDX </li>
</ol>
<li>Convertible 
<ol type="1">
<li>Chevrolet Corvette</li> 
<li>Porsche Boxster </li>
<li>Jaguar XKR </li>

[Kruithne]

Not 100% sure what you are asking (it's early for me so probably not using full brain power ) but I think you are asking how to use tables and apply CSS styles to it?

<table></table> - Table
<tr></tr> - Table row
<td></td> - Table Field

Below is a simple 4x4 table...

<table>
    <tr> 
        <td>Field 1 on Row 1</td>
        <td>Field 2 on Row 1</td>
    </tr>
    <tr> 
        <td>Field 3 on Row 2</td>
        <td>Field 4 on Row 2</td>
    </tr>
</table>

Below you can apply some styles to the fields/rows or entire table ...
This will make the entire table font 10pt Tahoma, the rows a width of 300px and each field a different font color.

<style>

#myTable { font-size: 10pt; font-family: Tahoma; }
.myRows { width: 300px; }
#myField1 { color: #FF0000 }
#myField2 { color: #00FF00 }
#myField3 { color: #0000FF }
#myField4 { color: #FF8000 }

</style>

<table id="myTable">
    <tr class="myRows"> 
        <td id="myField1">Field 1 on Row 1</td>
        <td id="myField2">Field 2 on Row 1</td>
    </tr>
    <tr class="myRows"> 
        <td id="myField3">Field 3 on Row 2</td>
        <td id="myField4">Field 4 on Row 2</td>
    </tr>
</table>

or you could try http://www.w3schools...html_tables.asp for more help.

If this is not what you were after or you need more help just ask and I'll do my best to help you.

[nikc121]

Kruithne, on 16 September 2010 - 07:38 AM, said:

Not 100% sure what you are asking (it's early for me so probably not using full brain power ) but I think you are asking how to use tables and apply CSS styles to it?

<table></table> - Table
<tr></tr> - Table row
<td></td> - Table Field

Below is a simple 4x4 table...

<table>
    <tr> 
        <td>Field 1 on Row 1</td>
        <td>Field 2 on Row 1</td>
    </tr>
    <tr> 
        <td>Field 3 on Row 2</td>
        <td>Field 4 on Row 2</td>
    </tr>
</table>

Below you can apply some styles to the fields/rows or entire table ...
This will make the entire table font 10pt Tahoma, the rows a width of 300px and each field a different font color.

<style>

#myTable { font-size: 10pt; font-family: Tahoma; }
.myRows { width: 300px; }
#myField1 { color: #FF0000 }
#myField2 { color: #00FF00 }
#myField3 { color: #0000FF }
#myField4 { color: #FF8000 }

</style>

<table id="myTable">
    <tr class="myRows"> 
        <td id="myField1">Field 1 on Row 1</td>
        <td id="myField2">Field 2 on Row 1</td>
    </tr>
    <tr class="myRows"> 
        <td id="myField3">Field 3 on Row 2</td>
        <td id="myField4">Field 4 on Row 2</td>
    </tr>
</table>

or you could try http://www.w3schools...html_tables.asp for more help.

If this is not what you were after or you need more help just ask and I'll do my best to help you.

Thanks I played around with my code a little more and got the below...But if you test it you willsee that my first column is doubling up for some reason. Its suppose to be two columns, left column has my list and the right column had the picture. Can you look and see what Im doing wrong, Then I have to try and change the font and colors to the left column, Im hoping the codes you listed above I can figure it out.

<table class="cars">
<table  width="100%" cellspacing="2">
<tr>
<td>

<ol type ="I">
<li>Compact 
<ol type="A">
<li>Two Door
<ol type="1">
<li>Honda Civic 
<li>Toyota RAV 4 
<li>Volvo C30 
</ol>
<li>Four Door 
<ol type="1">
<li>Mazda 3 </li>
<li>Inifiniti GT-R </li>
<li>Chevrolet Cruze </li>
</li>
</ol>

<li>Midsize 
<ol type="A">
<li>Two Door
<ol type ="1"> 
<li>Nissan Altima </li>
<li>Mercury Milan </li>
<li>Buick LaCrosse </li>
</ol>
<li>Four Door 
<td><ol type="1">
<li>Chrysler Sebring </li>
<li>BMW 3 </li>
<li>Toyota Camry </li>
</li>
</ol>

<li>Sports 
<ol type="A">
<li>Coupe 
<ol type="1">
<li>Hyundai Genesis</li> 
<li>Peugeot RCZ </li>
<li>Acura ZDX </li>
</ol>
<li>Convertible 
<ol type="1">
<li>Chevrolet Corvette</li> 
<li>Porsche Boxster </li>
<li>Jaguar XKR </li>
</td>

<td><p><img src="./images/final.jpg" alt="Cool Car" width="500" length="700" /></p>
</tr>
</table>

This post has been edited by nikc121: 16 September 2010 - 09:15 AM

[Kruithne]

Two things wrong with what you had posted ...

Firstly you had declared two table openings.. only need one of these so I merged them into one for you ...

OLD:
1. <table class="cars">
2. <table  width="100%" cellspacing="2">

NEW:
1. <table class="cars" width="100%" cellspacing="2">

Secondly, somewhere in the list you randomly had the start tag for a table field ...

OLD:
31. <li>Four Door 
32. <td><ol type="1">
33. <li>Chrysler Sebring </li>

NEW:
31. <li>Four Door 
32. <ol type="1">
33. <li>Chrysler Sebring </li>

This now makes two columns, one with your list and the other with your cool car image.

Just a small suggestion, when I was first learning code I used to lay it out the same way as you have done, but later on I found it much easier to display it more spaced out. Might be worth thinking about how you display your code while your at this stage .. below is a much easier to browse version of your code.

While making your code look more user friendly I noticed some mistakes...

- You didn't close your second table field with a </td>
- Alot of your LI's close before their children OL's
- You didn't close 12 (or more) of your tags at the end

<table class="cars" width="100%" cellspacing="2">
    <tr>
        <td>
            <ol type ="I">
                <li>Compact</li>
                <ol type="A">
                    <li>Two Door</li>
                    <ol type="1">
                        <li>Honda Civic</li>
                        <li>Toyota RAV 4</li>
                        <li>Volvo C30</li>
                    </ol>

                    <li>Four Door
                        <ol type="1">
                            <li>Mazda 3 </li>
                            <li>Inifiniti GT-R </li>
                            <li>Chevrolet Cruze </li>
                        </ol>
                    </li>


                    <li>Midsize
                        <ol type="A">
                            <li>Two Door
                                <ol type ="1">
                                    <li>Nissan Altima </li>
                                    <li>Mercury Milan </li>
                                    <li>Buick LaCrosse </li>
                                </ol>
                                <li>Four Door
                                    <ol type="1">
                                        <li>Chrysler Sebring </li>
                                        <li>BMW 3 </li>
                                        <li>Toyota Camry </li>
                                    </ol>
                                </li>


                                <li>Sports
                                    <ol type="A">
                                        <li>Coupe
                                            <ol type="1">
                                                <li>Hyundai Genesis</li>
                                                <li>Peugeot RCZ </li>
                                                <li>Acura ZDX </li>
                                            </ol>
                                            <li>Convertible
                                                <ol type="1">
                                                    <li>Chevrolet Corvette</li>
                                                    <li>Porsche Boxster </li>
                                                    <li>Jaguar XKR </li>
                                                <ol>
                                            </li>
                                        </li>
                                    </ol>
                                </li>
                            </li>
                        </ol>
                    </li>
                </ol>
            </ol>
        </td>
        <td>
            <p><img src="./images/final.jpg" alt="Cool Car" width="500" length="700" /></p>
        </td>
    </tr>
</table>

[nikc121]

I think Im going to pull my hair out...I made all your changes,, and thanks for finding all those errors, Ive been looking at this thing since last night. But now the roman numerials arent coming out right. Suppose to be I Compact II Midsize and then III Sports. Did I add to many </li>

<table class="cars" width="100" cellspacing="2">

<tr>
<td>

<ol type ="I">
<li>Compact</li> 
<ol type="A">
<li>Two Door</li>
<ol type="1">
<li>Honda Civic</li>
<li>Toyota RAV 4 </li>
<li>Volvo C30</li> 
</ol>
<li>Four Door</li> 
<ol type="1">
<li>Mazda 3 </li>
<li>Inifiniti GT-R </li>
<li>Chevrolet Cruze </li>

</ol>

<li>Midsize</li> 
<ol type="A">
<li>Two Door</li>
<ol type ="1"> 
<li>Nissan Altima </li>
<li>Mercury Milan </li>
<li>Buick LaCrosse </li>
</ol>
<li>Four Door</li> 
<ol type="1">
<li>Chrysler Sebring </li>
<li>BMW 3 </li>
<li>Toyota Camry </li>

</ol>

<li>Sports</li> 
<ol type="A">
<li>Coupe</li> 
<ol type="1">
<li>Hyundai Genesis</li> 
<li>Peugeot RCZ </li>
<li>Acura ZDX </li>
</ol>
<li>Convertible</li> 
<ol type="1">
<li>Chevrolet Corvette</li> 
<li>Porsche Boxster </li>
<li>Jaguar XKR </li></tr>
</td>


<td><p><img src="./images/final.jpg" alt="Cool Car" width="500" length="700" /></p>
</td>
</tr>
</table>

[Kruithne]

Alright, I see cleary now what you are trying to achieve. Rather than trying to explain all the errors for you to fix, replace your code with this tidy up of yours ...

<table class="cars" width="100%" cellspacing="2">
    <tr>
        <td>
            <ol type ="I">
                <li>Compact</li>
                <ol type="A">
                    <li>Two Door</li>
                    <ol type="1">
                        <li>Honda Civic</li>
                        <li>Toyota RAV 4</li>
                        <li>Volvo C30</li>
                    </ol>

                    <li>Four Door
                        <ol type="1">
                            <li>Mazda 3 </li>
                            <li>Inifiniti GT-R </li>
                            <li>Chevrolet Cruze </li>
                        </ol>
                    </li>
                </ol>
                <li>Midsize</li>
                <ol type="A">
                    <li>Two Door</li>
                    <ol type ="1">
                        <li>Nissan Altima </li>
                        <li>Mercury Milan </li>
                        <li>Buick LaCrosse </li>
                    </ol>
                    <li>Four Door</li>
                    <ol type="1">
                        <li>Chrysler Sebring </li>
                        <li>BMW 3 </li>
                        <li>Toyota Camry </li>
                    </ol>
                </ol>
                <li>Sports</li>
                <ol type="A">
                    <li>Coupe</li>
                    <ol type="1">
                        <li>Hyundai Genesis</li>
                        <li>Peugeot RCZ </li>
                        <li>Acura ZDX </li>
                    </ol>
                    <li>Convertible</li>
                    <ol type="1">
                        <li>Chevrolet Corvette</li>
                        <li>Porsche Boxster </li>
                        <li>Jaguar XKR </li>
                    </ol>
                </ol>
            </ol>
        </td>
        <td>
            <p><img src="./images/final.jpg" alt="Cool Car" width="500" length="700" /></p>
        </td>
    </tr>
</table>

Now, you can see by the structure of the code above how everything is supposed to be. One of the problems that was getting you in a mess was you were encasing your <ol> sets inside </li> tags rather than keeping them apart. If you compare your code to the one above you should see how you went wrong. Also on the last code you posted you added in a </tr> that had nothing to close inside a <td></td>.

Hope you understand a bit better on how to work list structures. If you need any more help please ask.

[nikc121]

Thank you Sooooooo much. The left column looks great.. Now just have to figure out how to add a .css and change the color to some of the text. Thank you again for all your help. THis is only my second we class and for somereason the instruc thinks we are ll proffes programmers. And the above was only the first part. I have to use the exact same information on the bottom of the page except i have to use div's. Its going to be like a split screen, tables on top and divs on the bottom with one .css sheet. Wish me luck,,,Im gonna need it.

[Kruithne]

No problems at all, if you need any help on further problems feel free to contact me, good luck on the rest of your classes.

[nikc121]

Ive been playing around with the colors for awhile. I am suppose to have everything under I to be orange, everything under II to be Green and III to be Red. All while using and external .css. As you can see I got the first word on each to turn colors, but how do i get the rest to do it. Thanks,,,,,,any help is great.

<table class="cars" width="100%" cellspacing="2">

<tr>
<td>

<ol type ="I">
<li id= "compact">Compact</li> 
<ol type="A">
<li>Two Door</li>
<ol type="1">
<li>Honda Civic </li>
<li>Toyota RAV 4 </li>
<li>Volvo C30 </li>
</ol>
<li>Four Door 
<ol type="1">
<li>Mazda 3 </li>
<li>Inifiniti GT-R </li>
<li>Chevrolet Cruze </li>

</ol>
</li>
</ol>
<li class= "midsize">Midsize</li> 
<ol type="A">
<li>Two Door</li>
<ol type ="1"> 
<li>Nissan Altima </li>
<li>Mercury Milan </li>
<li>Buick LaCrosse </li>
</ol>
<li>Four Door</li> 
<ol type="1">
<li>Chrysler Sebring </li>
<li>BMW 3 </li>
<li>Toyota Camry </li>

</ol>
</ol>
<li class= "sports">Sports</li> 
<ol type="A">
<li>Coupe </li>
<ol type="1">
<li>Hyundai Genesis</li> 
<li>Peugeot RCZ </li>
<li>Acura ZDX </li>
</ol>
<li>Convertible </li>
<ol type="1">
<li>Chevrolet Corvette</li> 
<li>Porsche Boxster </li>
<li>Jaguar XKR </li>
</ol>
</ol>
</ol>
</td>

<td><p><img src="./images/final.jpg" alt="Cool Car" width="500" length="700" /></p>
</tr>
</table>
<p>
<a href= "../index.html">Home</a>
</p>

ANd this is the .css

h1	{text-align: center; color:red}
h2	{text-align: center; font-style: italic; font-size: 20px}
body	{background-color: silver}

.cars	{font-family: palatino linotype}
#compact {color: orange}
.midsize {color: green}
.sports  {color: red}
list1	{color: orange}

[Kruithne]

Hello again. I see you have gone back to your previous structure. You really should be using tab spacing at the start of each line so your code looks cleaner and easier for others and yourself to read. A few things you also did wrong ...

- Missed out the closing </td> on the first field
- Enclosed the entire "Midsize" section in the title <li>

This is WRONG ...
                    <li>Midsize
                    <ol type="A">
                        <li>Two Door</li>
                        <ol type ="1">
                            <li>Nissan Altima </li>
                            <li>Mercury Milan </li>
                            <li>Buick LaCrosse </li>
                        </ol>
                        <li>Four Door</li>
                        <ol type="1">
                            <li>Chrysler Sebring </li>
                            <li>BMW 3 </li>
                            <li>Toyota Camry </li>
                        </ol>
                    </ol>
                    </li>

This is RIGHT ...

                    <li>Midsize</li>
                    <ol type="A">
                        <li>Two Door</li>
                        <ol type ="1">
                            <li>Nissan Altima </li>
                            <li>Mercury Milan </li>
                            <li>Buick LaCrosse </li>
                        </ol>
                        <li>Four Door</li>
                        <ol type="1">
                            <li>Chrysler Sebring </li>
                            <li>BMW 3 </li>
                            <li>Toyota Camry </li>
                        </ol>
                    </ol>

The reason the colors were only affecting the title was because you only applied it to the title, on the code below I have encased each section in a layer (<div></div) and applied the colors to that, so that all the content inside it is affected.

Example ...

CSS:
.blue { color: blue; }

HTML:

<li class="blue">This text is blue</li>
This text is NOT blue

<div class="blue">
   <li>This text is blue</li>
   This text is also blue
</div>

So completed we have the HTML ...

<table class="cars" width="100%" cellspacing="2">
    <tr>
        <td>
            <ol type ="I">
                <div id="orange">
                    <li>Compact</li>
                    <ol type="A">
                        <li>Two Door</li>
                        <ol type="1">
                            <li>Honda Civic </li>
                            <li>Toyota RAV 4 </li>
                            <li>Volvo C30 </li>
                        </ol>
                        <li>Four Door</li>
                        <ol type="1">
                            <li>Mazda 3 </li>
                            <li>Inifiniti GT-R </li>
                            <li>Chevrolet Cruze </li>
                        </ol>
                    </ol>
                </div>

                <div id="green">
                    <li>Midsize</li>
                    <ol type="A">
                        <li>Two Door</li>
                        <ol type ="1">
                            <li>Nissan Altima </li>
                            <li>Mercury Milan </li>
                            <li>Buick LaCrosse </li>
                        </ol>
                        <li>Four Door</li>
                        <ol type="1">
                            <li>Chrysler Sebring </li>
                            <li>BMW 3 </li>
                            <li>Toyota Camry </li>
                        </ol>
                    </ol>
                </div>

                <div id="red">
                <li>Sports</li>
                    <ol type="A">
                        <li>Coupe </li>
                        <ol type="1">
                            <li>Hyundai Genesis</li>
                            <li>Peugeot RCZ </li>
                            <li>Acura ZDX </li>
                        </ol>
                        <li>Convertible </li>
                        <ol type="1">
                            <li>Chevrolet Corvette</li>
                            <li>Porsche Boxster </li>
                            <li>Jaguar XKR </li>
                        </ol>
                    </ol>
                </div>
            </ol>
        </td>

        <td>
            <p><img src="./images/final.jpg" alt="Cool Car" width="500" length="700" /></p>
        </td>
    </tr>
</table>
<p>
    <a href= "../index.html">Home</a>
</p>

... and then the CSS ...

    h1	{text-align: center; color:red}
    h2	{text-align: center; font-style: italic; font-size: 20px}
    body	{background-color: silver}
    
    .cars	{font-family: palatino linotype}
    
    #orange { color: orange; }
    #green { color: green; }
    #red { color: red; }

I hope this helped you and gave you a little insight on to how you went wrong. Once again, if you need any help feel free to ask.

[nikc121]

Kruithne, That was perfect. I was intent on leaving but once I saw your updated code I had to try it. And I will try and start using the spaces. It was easier to read your code. I do become confused about when to start a <ol> and when to end, It all gets very confusing. ONE MORE Question. If I wanted to use all the same content and do a similar page but dont use tables, and only use DIV's, should I be able to just take out the <table> and replace it with <div>.

Again thanks for your help.

[nikc121]

Ok it was nto perfect,,,But SOOOO close. Now the I Compact and II Midzie and III Sport are showing I for all of them. Im scared to play around with that code its so close. And im working on validating in strict, and of course its saying i need all sorts of closing tags and <ol type="I"> not allowed. ....What do you think,,,,

[Kruithne]

Well <div> is a layer, which doesn't have sub elements like rows (<tr>) or fields (<td>) and so on so you couldn't just switch them that simply. You would need to work more with CSS to get <div>s to work more like tables.

With the strict DTD not allowing <ol type="I"> .. personally I don't use them, I would just write the titles with the roman numerals on in the first place, it saves problems such as you have with your strict validating.

If you want I can give you a rough idea of how to get the same layout with layers (<div>s)? Will have to do it tomorrow as I'm going to bed now.

[nikc121]

Kruithne, on 16 September 2010 - 05:11 PM, said:

Well <div> is a layer, which doesn't have sub elements like rows (<tr>) or fields (<td>) and so on so you couldn't just switch them that simply. You would need to work more with CSS to get <div>s to work more like tables.

With the strict DTD not allowing <ol type="I"> .. personally I don't use them, I would just write the titles with the roman numerals on in the first place, it saves problems such as you have with your strict validating.

If you want I can give you a rough idea of how to get the same layout with layers (<div>s)? Will have to do it tomorrow as I'm going to bed now.

That would be great, Im going to bed too. Two night in a row up till almost 2am, I need sleep...Thanks,, See you tomorrow.

[Kruithne]

Morning.

Let's get right into it then, this is a similar layout using layers (<div>s) rather than tables.

<style>
    h1	{text-align: center; color:red}
    h2	{text-align: center; font-style: italic; font-size: 20px}
    body	{background-color: silver}
    
    .cars	{font-family: palatino linotype}
    
    #orange { color: orange; }
    #green { color: green; }
    #red { color: red; }
    
    #outterDiv { width: 1000px; height: 600px; }
    #right { float: right; width: 495px; height: 100%; border: 1px solid #000000; }
    #left { float: left; width: 495px;  height: 100%; border: 1px solid #000000; }


</style>

<div id="outterDiv">
    <div id="left">
        <ol type ="I">
            <div id="orange">
                <li>Compact</li>
                <ol type="A">
                    <li>Two Door</li>
                    <ol type="1">
                        <li>Honda Civic </li>
                        <li>Toyota RAV 4 </li>
                        <li>Volvo C30 </li>
                    </ol>
                    <li>Four Door</li>
                    <ol type="1">
                        <li>Mazda 3 </li>
                        <li>Inifiniti GT-R </li>
                        <li>Chevrolet Cruze </li>
                    </ol>
                </ol>
            </div>

            <div id="green">
                <li>Midsize</li>
                <ol type="A">
                    <li>Two Door</li>
                    <ol type ="1">
                        <li>Nissan Altima </li>
                        <li>Mercury Milan </li>
                        <li>Buick LaCrosse </li>
                    </ol>
                    <li>Four Door</li>
                    <ol type="1">
                        <li>Chrysler Sebring </li>
                        <li>BMW 3 </li>
                        <li>Toyota Camry </li>
                    </ol>
                </ol>
            </div>

            <div id="red">
            <li>Sports</li>
                <ol type="A">
                    <li>Coupe </li>
                    <ol type="1">
                        <li>Hyundai Genesis</li>
                        <li>Peugeot RCZ </li>
                        <li>Acura ZDX </li>
                    </ol>
                    <li>Convertible </li>
                    <ol type="1">
                        <li>Chevrolet Corvette</li>
                        <li>Porsche Boxster </li>
                        <li>Jaguar XKR </li>
                    </ol>
                </ol>
            </div>
        </ol>
    </div>

    <div id="right">
        <p><img src="./images/final.jpg" alt="Cool Car" width="500" length="700" /></p>
    </div>
</div>
<p>
    <a href= "../index.html">Home</a>
</p>

How it works...

The entire "table" is wrapped #outterDiv which is a simple layer with the size 1000x600 pixels. Inside that you have a #right and a #left layer. If you look at the code above in your browser I have added a border to both #left and #right so you can see how they fit in.

The #right box has the attribute "float: right" and a width of 495px, this means the layer starts growing from the right hand side of it's parent (#outterDiv) for 495px.
The same effect with the left, "float: left" and a width of 495px, this makes the layer start growing from the left hand side of it's parent (#outterDiv) for 495px.

Half of the outter layer is 500px, so having each side 5 pixels less than this... A: creates a space inbetween them to make it look neater B: Stops them touching and causing a mess.

Both #left and #right have a height of 100% which makes them fill the entire height of their parent (#outterDiv) which is set to 600px.

Hope this gives you a good idea of how you can use layers on HTML. People say you should always use layers as apposed to tables, but I always go with whatever fits the job best.

If you need any more help just ask.