I did it: Complete! and I used CSS

HTML & CSS
1

With Span: https://jsfiddle.net/eqhdzz73/14/

With Objects: https://jsfiddle.net/eqhdzz73/7/2

Finished product :slight_smile:
https://testblog567895.blogspot.com/

With Objects / without span

<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;
  }
2 Likes
2

For this you deserve a round of applause, at least! FYI, the HTML validator only barked about the 3 attributes at the top of the first three lines of the table. All are deprecated and should be replaced by CSS… except the height attribute. {height:100%} would do nothing. Just so ya know, the width and height attributes in image tags and other elements generally assume that the number in parentheses are pixels and will fail if any unit of measure (including px) is included with the number.
The CSS validator only objected to the 3 {font-size:30;} properties. Font size requires a unit of measure.

:smile_cat:

3

Can you look at this and tell me if this is correct? https://jsfiddle.net/eqhdzz73/4/

4

How come there’s 5 oranges, 1 pink, and only 3 of the other color?

Aren’t they supposed to be in rows?

5

Because the oranges are class=“one” and there are 5 of them. The top row, third column has a class of three and it has he color:pink

6

Could I change that to only 3 classes?

7

I suppose you can. It’s your page :grin:

Have you ever worked with a spreadsheet, or played with a chessboard?

The table and its cells are similar in that it has rows and columns and each cell is the intersection of a row and a column; therefore each cell is unique. You can assign different colors to each cell if you wish or the same color to all of the cells in each row or the same color to all of the cells in each column.

8

What if I made them all 1 class?

9

If they’re all the same color, text size and all of that?

10

If you use the same class for all of the cells, they will all look alike.

Then you may not need to assign any classes. Just address the <td> in CSS.

td {
     color:magenta;
     etc.
}
1 Like
11

wait, the padding is different on all of them, so I can’t do that.

12

Really? The way I see it, the padding-bottom is different in the last row of cells only.

With that in mind, code all of the cells the same as shown in my previous post. Then change the last row of cells only:

tr:last-child td {
    padding-bottom:0;
}

If it turns out that you need to be more specific because you have more than just one table, then you can add a class to that last <tr> tag instead and address that class in the CSS.

tr.last td {
    padding-bottom:0;
}
1 Like
13

I added Radio 6 to td 1 cause the padding is the same as the others in that group.
Can I change td. 4 to td 2 and remove td 3? https://jsfiddle.net/eqhdzz73/6/

14

The span part I’m removing and replacing those spots in the html section with the radios.

15

@asasass, I don’t mulitask well, and you seem to be jumping around.

What happended to coding all of the cells the same and then adding an exception for the last row?

It does not look like the font-size error that you asked about has been fixed yet, either.

1 Like
16

I did it like this: New Code: I removed the span and added objects, and cut it down to 1td, and 2td https://jsfiddle.net/eqhdzz73/7/ Finished product: https://testblog567895.blogspot.com/

17

Orange and Pink are 2 different padding sizes, so I did it like that.

1 Like
18

This is what it looks like without height: http://i.imgur.com/FeTcmCx.png
This is what it looks like with Height 100%
https://testblog567895.blogspot.com/

19

So, I do need height.

20

Can you post your code outside of Blogspot, please? The code in Blogspot is horribly invalid. I don’t know anything about Blogspot, but your code was pretty good in the fiddles.

You shouldn’t. It’s not a valid value.

1 Like