Rearranged Table needs some Luv!

semicodin · May 15, 2022

Hi All . . .

I made a little Google Fonts Quick Reference guide as a table and then after getting it finished and validated immediately saw that I was using the wrong layout entirely. What the graphic below shows is the design I want to change, and the code that follows is the new table.

Edit: Copy my code into a new file named “GOOGLE_FONTS.html” and open it in your browser so you can see how far I got before needing help.

This is a very simple 2-Column layout: the first column consisting of a number (the font’s category) in a font called “Vast Shadow” (VS); the second column consisting of two rows assigned to the number in column one. In short, there are exactly 3 elements summarizing the font’s properties: one cell with its font category and the two rows with the font’s details assigned to it.

The first thing you’ll notice immediately is that the bottom row has hijacked column one’s font (VS) when it is supposed to be displayed in the font 'Roboto', sans-serif. In fact VS is only supposed to appear twice: as a number in column one, and as the last font group’s sample (in my code). Then the upper row displays a bit of Shakespeare for filler in the actual font (okay thus far), while the bottom row is supposed to display a the CSS font-family statement in Roboto.

So the bottom row needs to be in Roboto.

And the other thing I would like is a thicker border on the top of the whole group, spanning both columns, making it easier to see each group.

Eventually I’m going to attempt doing this in a Flex box but I want this simple table layout either way just for reference. Remember: the graphic below is the old version so you can see the 3 parts before I rearranged them! Thanks. —s

[CODE]

<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<TITLE>GOOGLE FONTS ᰄ by semicodin</TITLE>

<STYLE>
/* ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ */
HTML, BODY {
        text-size-adjust: 100%;
        font-size: 16px;
        line-height: 16px;
}
BODY {
        margin-top: 50px;
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 50px;
        width: 90%;
        background-color: IVORY;
        font-size: 1rem;
        line-height: 1.05;
        font-family: 'Roboto', sans-serif;
}

table tr:nth-child(odd){background-color: WHITE;}
table tr:nth-child(even){background-color: #DDDDDD;}

TABLE {
        margin-top: 2.5em;
        width: 100%;
        border: .2em SOLID BLACK;
        border-collapse: collapse;
        font-size: 1.13rem;
        line-height: 1;
        text-align: left;
}
TH {
        vertical-align: bottom;
        font-size: 2.5rem;
        line-height: 1;
        border-top: .3em SOLID CYAN;
        border-collapse: collapse;
        padding: .3rem;
        text-align: CENTER;
        color: CYAN;
        background-color: BLACK;
        font-family: 'Roboto', sans-serif;
        font-weight: 400;
}
TR {
        border: .2rem SOLID BLACK;
        border-collapse: collapse;
}

/* ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ */
tbody>tr>:nth-child(1) {        /* THE FONT’S GROUP NO. (eg. ‘1’) */
        font-size: 2.5rem;
        padding: .18rem;
        line-height: 1;
        border-right: .1rem SOLID BLACK;
        border-collapse: collapse;
        text-align: center;
        font-family: 'Vast Shadow', cursive;
}
tbody>tr>:nth-child(2) {        /* font-family: 'Nanum Gothic~~ etc. */
        width: 60%;
        color: BLUE;
        padding: .18rem;
        font-size: 1.75rem;
        line-height: 1;
        text-align: center;
}
tbody>tr>:nth-child(3) {        /* Description */
        width: 35%;
        color: BLACK;
        padding: .18rem;
        font-size: 1.75rem;
        line-height: 1;
        text-align: center;
        font-weight: 400;
        font-family: 'Roboto', sans-serif;
}

/* ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ */
.LIBR {font-family: 'Libre Baskerville', serif;}
.LNSD {font-family: 'Londrina Solid', cursive;}
.MET {font-family: 'Metal Mania', cursive;}
.MIL {font-family: 'Miltonian', cursive;}
.MILT {font-family: 'Miltonian Tattoo', cursive;}
.NAN {font-family: 'Nanum Gothic Coding', MONOSPACE;}
.OVER {font-family: 'Overlock', cursive;}
.PAP {font-family: 'Paprika', cursive;}
.PASS {font-family: 'Passero One', cursive;}
.PIR {font-family: 'Pirata One', cursive;}
.PLYB {font-family: 'Playball', cursive;}
.PLYF {font-family: 'Playfair Display', cursive;}
.PORT {font-family: 'Port Lligat Slab', serif;}
.QUA {font-family: 'Quando', cursive;}
.ROB {font-family: 'Roboto', sans-serif;}
.VAST {font-family: 'Vast Shadow', cursive;}

/* ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ */

.NORML {font-weight: normal;}
.NORMLC {
color: CRIMSON;
font-weight: normal;
}
.DBLUE {color: DODGERBLUE; font-weight: 400;}

</STYLE>
</HEAD>

<BODY>

<TABLE>
<THEAD>
<TR>

<th style="width: AUTO">№</th>
<th style="width: 95%">Font Sample & CSS Font‑Family</th>

</TR>
</THEAD>

<TBODY>

<TR>
<td rowspan="2" style="color: CRIMSON">2</td>
<td class="LIBR">
@ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</td></TR>

<TR><td>font-family: 'Libre Baskerville', <span style="color: CRIMSON">serif</span>;<BR>
<div class="DBLUE">Has Italic</div></td></TR>

<TR>
<td rowspan="2" style="color: BLUE">1</td>
<td class="LNSD">
@ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</td></TR>

<TR><td>font-family: 'Londrina Solid', cursive;</td></TR>

<TR>
<td rowspan="2" style="color: BLACK">4</td>
<td class="MIL">
@ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</td></TR>

<TR><td style="color: BLACK">font-family: 'Miltonian', cursive;</td></TR>

<TR>
<td rowspan="2" style="color: BLUE">1</td>
<td class="MILT">
@ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</td></TR>

<TR><td>font-family: 'Miltonian Tattoo', cursive;</td></TR>

<TR>
<td rowspan="2" style="color: BLUE">1</td>
<td class="OVER">
@ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</td></TR>

<TR><td>font-family: 'Overlock', cursive; <span style="color: DODGERBLUE">(SANS-SERIF)</span><BR>
<div class="DBLUE">Has Italic</div></td></TR>

<TR>
<td rowspan="2" style="color: CRIMSON">2</td>
<td class="PAP">
@ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</td></TR>

<TR><td>font-family: 'Paprika', cursive; <span style="color: CRIMSON">(SERIF)</span></td>
</TR>

<TR>
<td rowspan="2" style="color: DARKORANGE">5</td>
<td class="PLYB">
@ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</td></TR>

<TR><td>font-family: 'Playball', cursive; <span style="color: DARKORANGE">(SERIF)</span></td></TR>

<TR>
<td rowspan="2" style="color: CRIMSON">2</td>
<td class="PORT">
@ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</td></TR>

<TR><td>font-family: 'Port Lligat Slab', <span style="color: CRIMSON">serif</span>;</td></TR>

<TR>
<td rowspan="2" style="color: BLACK">4</td>
<td class="VAST">
@ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</td></TR>

<TR><td style="color: BLACK">font-family: 'Vast Shadow', cursive;</td></TR>

</TBODY>
</TABLE>

</BODY>
</HTML>

[/CODE]

Edited May 15, 2022 by semicodin

Sign In

Rearranged Table needs some Luv!

Recommended Posts

semicodin

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity