I did it: Complete! and I used CSS

HTML & CSS
83

That’s because you are setting a line-height smaller than your font-size, causing things to collapse.
25 < 30 = true
line-height is one css property where it’s actually best to set as unitless.
A value of 1 equals the current font size. 1.2 is one and one fifth the font size, etc…
This ensures the height is always relative to the font size, whatever the size, whatever the units.

2 Likes
84

Just for fun, here’s a similar way of doing the same thing. Uses divs and display table elements instead of tables.

It’s a working page. Copy it to a file and open it in your browser.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>radio rows</title>
<!--
https://www.sitepoint.com/community/t/i-did-it-complete-and-i-used-css/228098
asasass
2016.06.22 23:51
-->
    <style type="text/css">

html {
    box-sizing:border-box;
}
*,*:before,*:after {
    box-sizing:inherit;
}

html,body {
    height:100%;
}
body {
    padding:0;
    margin:0;
}
.outer {
    display:table;
    height:100%;
    margin:0 auto;
}
.tcell {
    display:table-cell;
    vertical-align:middle;
}
.radiorow {
    display:table;
    table-layout:fixed;
}
.radiorow + .radiorow {
    margin-top:100px;    /* space between radiorows */
}
.one {
    color:#EB7225;
    font-size:1.875em;
    font-weight:bold;
    padding-top:0px; 
    padding-right:50px; 
    padding-left:50px;
    outline:1px dotted blue;
}
.two {
   color:#F984E4;
}
.dashboard {
    color:#000000; 
    display:block; 
    width:300px; 
    height:24px;
    background-color:#E2AB58;
}
    </style>
</head>
<body>

<div class="outer">
    <div class="tcell">
        <div class="radiorow">
            <div class="tcell one">
                Radio 1
                <div class="dashboard"></div>
            </div>
            <div class="tcell one">
                Radio 2
                <div class="dashboard"></div>
            </div>
            <div class="tcell one">
                Radio 3
                <div class="dashboard"></div>
            </div>
        </div>
        <div class="radiorow">
            <div class="tcell one">
                Radio 4
                <div class="dashboard"></div>
            </div>
            <div class="tcell one">
                Radio 5
                <div class="dashboard"></div>
            </div>
            <div class="tcell one">
                Radio 6
                <div class="dashboard"></div>
            </div>
        </div>
        <div class="radiorow">
            <div class="tcell one two">
                Radio 7
                <div class="dashboard"></div>
            </div>
            <div class="tcell one two">
                Radio 8
                <div class="dashboard"></div>
            </div>
            <div class="tcell one two">
                Radio 9
                <div class="dashboard"></div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
85

Here: https://jsfiddle.net/kem5hrx7/4/

86

Back at ya.

https://jsfiddle.net/eqhdzz73/49/

distinct boxes instead of double lines. Line-height friendly

and

https://jsfiddle.net/eqhdzz73/50/

distinct single boxes. Have fun playing with the line-height.

…

Sometimes a little coffee helps. :coffee:

1 Like
87

I believe that 1.2 is closer to the typical line height of most fonts. I don’t remember how they come up with these numbers but I believe it includes leading which is included in the height.

MDN has some info: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

I think this is the resource that I used when learning more about line-heights. Really good.
http://www.slideshare.net/maxdesign/line-height

2 Likes
88

I don’t think fonts have individual line heights, but a total height the font occupies equal to 1em. The line height they get is what the browser renders as default, or what’s defined by css.

Anything above 1 has leading. 1 being the full height of a font, from ascender to descender (not cap height or any such). If you think of it as metal print blocks, the full height of the block, so at 1 the descender from one line will almost touch the ascender of the next, which looks a bit tight.
So I think the default value (normal) is at about but not exactly 1.2, the font with leading ~20% of its full block height.
Seeing normal and 1.2 side by side, they look about the same, but very slightly off.

Still haven’t figured out the maths though, because at font-size: 1em, normal is > 1.2, but at 2em, normal is < 1.2 :confused:

2 Likes
89

This is a good read on this topic. http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

1 Like
90

I don’t think I have ever come across a situation where nested tables would be semantically correct - even if it were not for the fact that nesting tables makes it just ablout impossible to style the page meaningfully for all resolutions.

91

The size of an em has nothing whatever to do with height - it is based on the WIDTH of a capital M which is usually the widest character in any font.

92

Nested Tables: https://www.lehigh.edu/~inwww/seminar/intermediate/tables/table-nest.html What other types of tables are there?

93

Should I be using something like this? Other then nested tables? http://webdesign.about.com/od/speed/a/dont-use-nested-tables.htm Thoughts, opinions.

<table style="width:100%;">
  <tr>
    <td colspan="2">top row</td>
  </tr>
  <tr>
    <td>left column</td>
    <td>right column</td>
  </tr>
</table>

[or]

this

<table style="width:100%;">
  <tr>
    <td colspan="2">top row</td>
  </tr>
</table>
<table style="width:100%;">
  <tr>
    <td>left column</td>
    <td>right column</td>
  </tr>
</table>
94

If you are displaying tabular data, then you need to structure your tables in the most logical way for that data.

If you’re not displaying tabular data, then you shouldn’t be using HTML tables at all.

95

tables are only nested when you have a table tag inside a td tag.

A properly constructed table looks something like this:

<table summary="example table">
<caption>example table</caption>
<colgroup>
<col style="background:#fcc;" />
</colgroup>
<colgroup span="3" style="background:#ccc;"></colgroup>
<thead>
<tr>
<th>&nbsp;</th>
<th scope="col">Col 1</th>
<th scope="col">Col 2</th>
<th scope="col">Col 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>&nbsp;</td>
<td>Foot 1</td>
<td>Foot 2</td>
<td>Foot 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Row 1</th>
<td>row 1, Col 1</td>
<td colspan="2">row 1, Col 2 and 3</td>
</tr>
<tr>
<th scope="row">Row 2</th>
<td>row 2, Col 1</td>
<td rowspan="2">row 2 and 3, Col 2</td>
<td>row 2, Col 3</td>
</tr>
<tr>
<th scope="row">Row 3</th>
<td>row 3, Col 1</td>
<td>row 3, Col 3</td>
</tr>
</tbody>
</table>

In some cases you might have multiple tbody tags.

96

What type of tables should I be using for this: https://jsfiddle.net/eqhdzz73/14/

97

Does what I have then require nested tables? https://jsfiddle.net/eqhdzz73/27/

98

Am I displaying tubular date here? https://jsfiddle.net/eqhdzz73/54/

99

What’s the name for the kind of table I’m using, is it called a nested table?

100

None at all - it isn’t tabular data so it shouldn’t be in a table - it actually looks more like a list.

1 Like
101

How would I set up the code without using a table?

102

Can you show me an example on jsfiddle of doing this code without utilizing a table? https://jsfiddle.net/eqhdzz73/54/