CSS

    Help creating CSS tables with ROWSPAN – HTML & CSS – SitePoint Forums

    websitebuildersnowBy No Comments5 Mins Read


    Archibald. I tried to adapt your code to my his 4 font swatches but it didn’t work. Here is my effort:

    <!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

<TITLE>97 TABLE FONTS &#7172; including  Archibald</TITLE>

<STYLE>

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
}
BODY {
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 2.5rem;
        margin-bottom: 2.5rem;
        font-size: 1rem;
        line-height: 1;
        font-weight: 500;
        font-family: 'Roboto Slab', sans-serif;
}

.COU {
        
        line-height: 1;
        font-weight: 700;
        font-size: 1rem;
        font-family: 'COURIER PRIME', monospace;
}

.CRE {
        
        font-style: ITALIC;
        line-height: 1.1;
        font-weight: 400;
        font-size: 1rem;
        font-family: 'CRETE ROUND', serif;
}

.HEN {
        
        line-height: 1.5;
        font-weight: 400;
        font-size: 1rem;
        font-family: 'HENNY PENNY', display;
}

.MET {
        
        line-height: 1;
        font-weight: 400;
        font-size: 1rem;
        font-family: 'METAL MANIA', display;
}


table { border-collapse: collapse; }
th { border: 8px GROOVE #00FFFF; }
td { border: 2px solid black; height: 30px; }
tr:first-child { background-color: black; color: white; }

.span1 { 
        background-color: #e2ff9e;
        line-height: 1;
        font-weight: 700;
        font-size: 1rem;
        font-family: 'COURIER PRIME', monospace;
}
.type1 { 
        background-color: #ffa3d3; 
        font-style: ITALIC;
        line-height: 1.1;
        font-weight: 400;
        font-size: 1rem;
        font-family: 'CRETE ROUND', serif;
}
.type2 { 
        background-color: #96e2ff; 
        line-height: 1.5;
        font-weight: 400;
        font-size: 1rem;
        font-family: 'HENNY PENNY', display;
}
.type3 { 
        background-color: #ffda7e; 
        line-height: 1;
        font-weight: 400;
        font-size: 1rem;
        font-family: 'METAL MANIA', display;
} 

table {
  border-collapse: collapse;
}

td, th {
  border: 2px solid black;
  height: 30px;
}

tr:first-child {
  background-color: black;
  color: white;
}

.span1 {
  background-color: #e2ff9e;
}

.type1 {
  background-color: #ffa3d3;
}

.type2 {
  background-color: #96e2ff;
}

.type3 {
  background-color: #ffda7e;
}

</style>
</head>

<BODY>

<TABLE>
<TR>
<TD class="COU" rowspan="3">
This is a sample of the (bolded) Google Font &ldquo;COURIER PRIME&rdquo; &ndash; a Monospace font developed by Mozilla!</TD>
</TR>

<TR>
<TD class="CRE">
This is a sample of the Google Font <B>&ldquo;CRETE ROUND&rdquo;</B> &ndash; shown here italicized</td>
</TR>

<TR>
<td class="HEN">
This is a sample of the Google Font &ldquo;HENNY PENNY&rdquo; &ndash; <B>a playful display font</B> by font developer &ldquo;brownfox&rdquo;</td>
</TR>

<TR>
<td class="MET">
This is a sample of the Google Font &ldquo;METAL MANIA&rdquo; &ndash; a Gothic font rendered in small caps, particularly suited to <B>SHAKESPEARE EXCERPTS</B> I have found.</td>
</TR>

</TABLE>

<table>
  <tbody>
    <tr>
      <th>HEADER FOR COLUMN 1</th>
      <th>HEADER FOR COLUMN 2</th>
    </tr>
    <tr>
      <td class="span1" rowspan="3">
      <td class="type1"></td>
    </tr>
    <tr>
      <td class="type2"></td>
    </tr>
    <tr>
      <td class="type3"></td>
    </tr>
  <tbody>
</table>

</body>
</html>

    To restate the obvious, I tried to put my HTML in Archibald’s outline. I’ll keep tweaking it, but I’d be very grateful if someone did it the right way.

    I have a turquoise border around the header and scraped off a solid black border. The code is below.

    Finally – some progress!

    I’ve gone as far as I can plug in the content so you can get a better idea of ​​the whole thing. I have a problem at the borderThe turquoise header frame is not displayed. Give the table a 5% margin to breathe a little. So here is code, warts and everything!

    <!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

<TITLE>93 TABLE FONTS &#7172; including by Archibald</TITLE>

<STYLE>

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
}
BODY {
        margin-left: 5%;
        margin-right: 5%;
        margin-top: 54px;
        margin-bottom: 54px;
        font-size: 1rem;
        line-height: 1;
        font-weight: 500;
        font-family: 'Roboto Slab', sans-serif;
}

.COU {
        
        line-height: 1;
        font-weight: 700;
        font-size: 1rem;
        font-family: 'COURIER PRIME', monospace;
}

.CRE {
        
        font-style: ITALIC;
        line-height: 1.1;
        font-weight: 400;
        font-size: 1rem;
        font-family: 'CRETE ROUND', serif;
}

.HEN {
        
        line-height: 1.5;
        font-weight: 400;
        font-size: 1rem;
        font-family: 'HENNY PENNY', display;
}

.MET {
        
        line-height: 1;
        font-weight: 400;
        font-size: 1rem;
        font-family: 'METAL MANIA', display;
}


table { 
        border-collapse: collapse;
        border: 6px SOLID BLACK;
}

TH {
        vertical-align: bottom;
        border: 4px GROOVE #00FFFF;
        border-collapse: collapse;
        padding: .38rem;
        text-align: CENTER;
        color: WHITE;
        background-color: BLACK;
        line-height: 1;
        font-weight: 600;
        font-size: 1rem;
        font-family: 'Roboto Slab', sans-serif;
}
td {border: 2px solid black;}
tr:first-child { background-color: black; color: white; }

.span1 { 
        background-color: #e2ff9e;
        vertical-align: TOP;
        line-height: 1;
        font-weight: 700;
        font-size: 1rem;
        font-family: 'COURIER PRIME', monospace;
}
.type1 { 
        background-color: #ffa3d3; 
        vertical-align: TOP;
        font-style: ITALIC;
        line-height: 1.1;
        font-weight: 400;
        font-size: 1rem;
        font-family: 'CRETE ROUND', serif;
}
.type2 { 
        background-color: #96e2ff; 
        vertical-align: TOP;
        line-height: 1.5;
        font-weight: 400;
        font-size: 1rem;
        font-family: 'HENNY PENNY', display;
}
.type3 { 
        background-color: #ffda7e; 
        vertical-align: TOP;
        line-height: 1;
        font-weight: 400;
        font-size: 1rem;
        font-family: 'METAL MANIA', display;
} 

table {
  border-collapse: collapse;
}

td, th {
  padding: .38rem;
  border: 2px solid black;
  height: 30px;
}

tr:first-child {
  background-color: black;
  color: white;
}

.span1 {
  background-color: #e2ff9e;
}

.type1 {
  background-color: #ffa3d3;
}

.type2 {
  background-color: #96e2ff;
}

.type3 {
  background-color: #ffda7e;
}

</style>
</head>

<body>

<TABLE border="8px BLACK">
<TBODY>

<TR>
<TH>HEADING FOR THE LEFT COLUMN</TH>
<TH>HEADING FOR THE RIGHT COLUMN</TH>
</TR>

<TR>
      <td class="span1" rowspan="3">
This is a sample of the (bolded) Google Font &ldquo;COURIER PRIME&rdquo; &ndash; a Monospace font developed by Mozilla!

      <td class="type1">
This is a sample of the Google Font <B>&ldquo;CRETE ROUND&rdquo;</B> &ndash; shown here italicized</td>
    </tr>

<TR>
      <td class="type2">This is a sample of the Google Font &ldquo;HENNY PENNY&rdquo; &ndash; <B>a playful display font</B> by font developer &ldquo;brownfox&rdquo;
</td>
    </tr>

<TR>
      <td class="type3">This is a sample of the Google Font &ldquo;METAL MANIA&rdquo; &ndash; a Gothic font rendered in small caps, particularly suited to <B>SHAKESPEARE EXCERPTS</B> I have found.</td>
    </tr>
  <tbody>
</table>

</body>
</html>



    Source link

    Share.

    Related Posts

    Add A Comment

    Leave a Reply