Html help needed.

LukeyKid · 13-10-2014 7:55pm #1

For collage we have to make a Table and i'm after really confusing my self with this

ill have a link to the table i need to make and to were i am and completely stuck.

be a great help if some one could sort this out.

Screen Shot.png - is the one i need to copy
Homework - is the one iv done.

Greyian · 13-10-2014 11:07pm

This will help with the border issue (removing the border between columns which is going down the middle).

This is what you need for changing the colours of the borders (from their default black to the purple you need). I don't know if the exact colours are what you need, or if you just have to have the rows with alternating colours.

It should be noted though that this is not the way you'd really want to be designing tables when you're making sites, but I'm guessing your course in college is still at a very basic level, so you'll not using CSS yet.

LukeyKid · 13-10-2014 11:18pm

Greyian wrote: »

This will help with the border issue (removing the border between columns which is going down the middle).

This is what you need for changing the colours of the borders (from their default black to the purple you need). I don't know if the exact colours are what you need, or if you just have to have the rows with alternating colours.

It should be noted though that this is not the way you'd really want to be designing tables when you're making sites, but I'm guessing your course in college is still at a very basic level, so you'll not using CSS yet.

Thank man and i am using CSS man but im just getting very confused with the hole thing but i suppose im only been doing it for a couple of weeks so id say its normal :L

Buford T Justice · 13-10-2014 11:35pm

If you want to alternate the colours in CSS, then you can do the following:

tr:nth-child(even) {
    background-color: #000000;
}

It'll specify the even row colours (obviously) and you can just define you're odd colour as the default for the table. Then, as the table expands so will the alternating colours.

Although, if you're just looking to replicate what you see as is, then you can find a colour picker online that will give you the hash value of the colours you want.

Greyian · 13-10-2014 11:35pm

LukeyKid wrote: »

Thank man and i am using CSS man but im just getting very confused with the hole thing but i suppose im only been doing it for a couple of weeks so id say its normal :L

I wouldn't be too worried about feeling confused about it early on, most people I talk to who do software development, web design, anything with programming languages seem to agree that each new thing can take a while to understand, then the penny drops and it seems really simple from that point on.

Seeing as you're also using CSS, I'd advise putting all your styling into the CSS.

So it would look something like this

<table class="PricesTable">
[INDENT]<tr class="header"><td>Order Amount</td><td>Shipping Handling Fee</td></tr>
<tr class="even"><td>$15.00 and under</td><td>$3.95</td></tr>
<tr class="odd"><td>$15.01 - $30.00</td><td>$4.95</td></tr>[/INDENT]
</table>

Obviously continuing with even/odd for each step in your prices.

Then in your CSS file, you'd have a class for tables called PricesTable, which would have the border settings, and 3 classes for rows, which would each have different background colours.
You could, if you wanted to, also added classes for table cells (your <td>s), so the left hand side would be bolded, without you writing <b>$15.00 and under</b>

Edit: And Buford beat me to it and wrote what I had to say much more effectively anyway :P

mewso · 15-10-2014 1:31am

I really hope they teach headers, bodies and accessibility with tables these days.

<table class="PricesTable">
    <thead>
        <tr>
              <th id="Amount">Order Amount</th>
              <th id="HandlingFee">Shipping Handling Fee</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td headers="Amount">$15.00 and under</td>
            <td headers="HandlingFee">$3.95</td>
       </tr>
       <tr class="even">
             <td headers="Amount">$15.01 - $30.00</td>
             <td headers="HandlingFee">$4.95</td>
       </tr>
    </tbody>
</table>

and keep classes and such to a minimum using css to drill down to what you want.

table.PricesTable thead tr th {
 /* style thead cells */
}

table.PricesTable tbody tr td {
 /* style all cells in rows in the tbody */ 
}

table.PricesTable tbody tr.even td {
 /* override style for all cells in a tbody row with a class of even */ 
}

Funny how people get into the habit of using "odd" for every second row. From some long forgotten html tutorial past.

smcelhinney · 15-10-2014 10:17pm

mewso wrote: »

table.PricesTable thead tr th {
 /* style thead cells */
}

table.PricesTable tbody tr td {
 /* style all cells in rows in the tbody */ 
}

table.PricesTable tbody tr.even td {
 /* override style for all cells in a tbody row with a class of even */ 
}

mewso hasnt mentioned it but his code example displays another extremely important CSS concept: specificity. Very important when you start learning advanced CSS techniques and using preprocessors (SASS/LESS).

LukeyKid · 16-10-2014 9:09am

Thanks for the help guys i have that one done, but know i can get the spacing right for this one, its really annoying because the headings aren't centered.

mewso · 16-10-2014 11:25am

They are centered but the content below them is not. The default (in most browsers) without styling is to center align content in th cells and left align content in td cells so what you really want to do is left align the th content.

table.PricesTable thead tr th {
 text-align: left;
}

I should add I would normally right-align numerical values like the content in your right-hand column but they are left aligned in the original screen shot so you should probably leave them as is. In general though I think it's more readable to right-align numbers so they line up properly.

Html help needed.

Comments