I did it: Complete! and I used CSS

HTML & CSS
21 
<table align='center' height='100%'>
  <tr>
    <td valign='middle'>
      <table>
        <tr>
          <td class="one">
Radio 1
            <br/>
<object></object>
          </td>
          <td class="one">
Radio 2
            <br/>
<object></object>
          </td>
          <td class="one">
Radio 3
            <br/>
<object></object>
          </td>
        </tr>
        <tr>
          <td class="one">
Radio 4
            <br/>
<object></object>
          </td>
          <td class="one">
Radio 5
            <br/>
<object></object>
          </td>
          <td class="one">
Radio 6
            <br/>
           
<object> </object>

          </td>
        </tr>
        <tr>
          <td class="two">
Radio 7
            <br/>
<object></object>
          </td>
          <td class="two">
Radio 8
            <br/>
<object ></object>
          </td>
          <td class="two">
Radio 9
            <br/>
<object ></object>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

td.one{
    color: #EB7225;
    line-height:1;
    font-size:30;
    font-weight:bold;
       padding-top: 0px; 
    padding-right: 50px; 
    padding-bottom: 100px; 
    padding-left: 50px;
  }
  
  td.two{
    color: #F984E4;
    line-height:1;
    font-size:30;
    font-weight:bold;
    font-weight:bold;
       padding-top: 0px; 
       padding-right: 50px; 
       padding-bottom: 0px; 
       padding-left: 50px;
  }
22

I just have to change the font-size:30; to 30px and it’s good.

23

Instead of 30px, consider 2em. (1.875em if you’re picky). ems can be resized by the user.

1 Like
24

I can resize px also, I don’t get it? I can change 30px to 34px if I want.

25

You don’t need the class on the table cells to define the color - you can define it using CSS values that work out the cell positions to apply what color to.

26

Is there something wrong with the way it’s currently set up?

27

The fewer places you rely on classes for styling the easier it is to change things just by amending the CSS.

When you have a web site with hundreds or thousands of pages and you can completely redo the site appearance by changing one CSS file instead of having to change every individual page you will recognise the benefit.

28

What I’m using it for is only recreational.

29

There is nothing wrong with the way you have assigned classes and rules.

felgall is saying that it is more efficient to avoid repeating properties unnecessarily.

Remember my example about coding all of the cells the same and writing another rule to change the padding-bottom of the cells in the last row? You can also change the color of the text in the last row in that same exception rule.

30

Why would I want to change the padding in the last row? What would I change it to, and why?

31

Doesn’t the bottom row of cells have zero padding-bottom, while the cells in the first two rows have padding-bottom:100px?

td.one {
    color: #EB7225;
    line-height:1;
    font-size:2em;
    font-weight:bold;
    padding-top: 0px; 
    padding-right: 50px; 
    padding-bottom: 100px; 
    padding-left: 50px;
}
  
td.two {
    color: #F984E4;
    line-height:1;
    font-size:2em;
    font-weight:bold;
    font-weight:bold;
    padding-top: 0px; 
    padding-right: 50px; 
    padding-bottom: 0px; 
    padding-left: 50px;
}

It would be more efficient to say:

td {
    color: #EB7225;
    line-height:1;
    font-size:2em;
    font-weight:bold;
    padding-top: 0px; 
    padding-right: 50px; 
    padding-bottom: 100px; 
    padding-left: 50px;
}
td.two {
    color: #F984E4;
    padding-bottom:0;
}
32

I need padding right and left on td 2: Updated Again: https://jsfiddle.net/eqhdzz73/14/

33

I don’t know how to save a revision but try this: (let me know if you can see the change that I made)

It’s not cool to use the same classname for different elements unless the same styles are being applied to different elements. It would be better to use a different classname for the spans or none at all… just target the <span> tags if you can.

34

Do you see the difference? https://jsfiddle.net/eqhdzz73/17/ / / https://jsfiddle.net/eqhdzz73/18/

35

Yes, number 17 looks correct. The first rule addresses all of the td elements.

36

17 there’s padding at the bottom.

37

Put the code in here and you’l see a big chunk of padding at the bottom: http://codepen.io/pen/

38

This is that code: http://i.imgur.com/ytCb4Mq.png

39

How come you changed??? td.one{ [to] td { https://jsfiddle.net/eqhdzz73/17/ What was the reason for that?

40

Need to address all table cells. However, that was a mistake because I forgot that there are nested tables. That space at the bottom is padding from the outer table.

There is no useful reason to use an outer table. A div would probably suffice for an outer container, if needed.