Achieving a “Mitred” Effect on the Borders for 1 Table + Header

I have a Table of Contents (toc) for which there is a th header I want to have a mitred effect on its 4 groove corners . . . and on the rest of the table as well. I figured out that I could achieve this effect by removing its border-collapse: collapse property. There is just one problem: I can’t get the mitres on everything hanging below the header without duplicating another table.

It’s complicated because I already have 2 tables in place to achieve a second color hue on the nth child striping.

The closest I have been able to get is to 1) trade in the th header for its own table, 2) stack the (now 2nd and 3rd) remaining tables below the lead 1st table with groove borders on the left and right sides . . . and 3) settle for the loss of the bottom border’s mitred corners because I couldn’t give it a 4th side.

WHAT A DRAMA! You’ll see the challenge when you open the page code for the toc, below.

SUMMARIZED
I can’t get that bottom-most margin to mitre.

I wish the original developers of the earliest world wide web (yes, I am that old lol) would have anticipated this contingency by extending the table header’s mitred corners to the 3 corners of the rest of the table but apparently they didn’t.

So the code below fails that bottom margin and i don’t know how to give it mitred borders because it only has >>3 sides.

If anyone has a workaround I’d be eternally grateful. I apologize for being verbose but I have no easy way to summarize the issue. Thank you anyone who can help me get the bottom margin mitred!

<!DOCTYPE html>
<HTML LANG="en">

<HEAD>
  <meta http-equiv="Content-Type" content="text/html; 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=Roboto:wght@100;200;300;400;500;600;700;800;900&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+Condensed: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=Calistoga&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&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=Special+Elite&display=swap" rel="stylesheet">

  <title>TABLE OF CONTENTS &#7172; semicodin</title>

  <style>
    body {
      width: 1080px;
      background-color: black;
      margin: 0;
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.5rem;
      line-height: 2.63rem;
    }

    #counter {
      text-align: center;
      position: absolute;
      bottom: 0;
      max-width: 100%;
    }

    .ssz1 {
      margin-top: 3.13rem;
      text-align: center;
      font-family: 'crete round';
      font-size: 2rem;
      line-height: 2.25rem;
      font-weight: bold;
      color: #ebf6ff;
      /* PALE BLUE */
    }

    .ssz2 {
      text-align: center;
      margin-bottom: 1.75rem;
      font-family: 'crete round';
      font-size: 1.75rem;
      line-height: 2rem;
      font-weight: bold;
      color: #ebf6ff;
      /* PALE BLUE */
    }

    .henpen {
      text-align: center;
      color: #ffffee;
      /* ivory */
      margin: 2.5rem 16% 0rem 16%;
      font-size: 3.75rem;
      line-height: 3.88;
      font-weight: 700;
      font-family: 'Henny Penny', cursive;
    }

    .thanks {
      margin: 2.5rem 15% 6.25rem 15%;
      color: #ffffee;
      /* ivory */
      text-align: center;
      font-style: italic;
      font-family: 'crete round', serif;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: bold;
    }

    .hilite {
      margin: 0rem 3.38rem 0rem 3.38rem;
      text-align: center;
      font-style: italic;
      color: black;
      background-color: white;
      font-family: 'crete round', serif;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: bold;
      padding-top: .5rem;
      padding-right: .8rem;
      padding-bottom: .6rem;
      padding-left: .8rem;
    }

    td {
      padding-top: .5rem;
      padding-right: .5rem;
      padding-bottom: .6rem;
      padding-left: .8rem;
    }

    .here {
      color: #888888;
      font-family: 'roboto slab', serif;
      font-weight: 400;
      font-size: 2.25rem;
      line-height: 2.31rem;
    }

    /* ━━━━━━━━ TABLE 1 ━━━━━━━━ */
    .table1 th {
      border: 1.75rem groove #dab471;
      /* mushrooms */
      padding: .8rem;
      width: auto;
      color: #ffffee;
      /* ivory */
      text-align: center;
      font-style: italic;
      background-color: black;
      font-family: 'crete round', serif;
      font-size: 4rem;
      line-height: 4.25rem;
      font-weight: bold;
    }

    .group1 {
      /*   CLASS LETTER (A-E)    */
      width: 8%;
      color: blue;
      font-family: 'calistoga', serif;
      font-weight: 400;
      font-size: 2.75rem;
      line-height: 2.88rem;
    }

    .head1 {
      width: 88%;
      /* DESCRIPTION */
      color: blue;
      font-family: 'calistoga', serif;
      font-weight: 400;
      font-size: 2.75rem;
      line-height: 2.88rem;
    }

    .table1 {
      border-left: 1.75rem groove #dab471;
      /* shrooms */
      border-right: 1.75rem groove #dab471;
      /* shrooms */
      width: auto;
      margin: 2.25rem 9% 0rem 9%;
      font-family: 'roboto slab', serif;
      font-size: 2.25rem;
      line-height: 2.31rem;
      font-weight: bold;
      color: black;
    }

    .table1 tbody tr:nth-child(odd) {
      background-color: white;
    }

    .table1 tbody tr:nth-child(even) {
      background-color: #ebf6ff;
      /* PALE BLUE */
    }

    .table1 tbody tr td:nth-of-type(1) {
      border-right: .19rem solid black;
      text-align: center;
    }

    .table1 tbody tr td:nth-of-type(2) {
      border-right: .19rem solid black;
      text-align: left;
    }

    /* ━━━━━━━━ TABLE 2 ━━━━━━━━ */
    .group2 {
      /* CLASS LETTER (A-E) */
      width: 8%;
      font-family: 'calistoga', serif;
      font-weight: 400;
      font-size: 2.75rem;
      line-height: 2.88rem;
      color: green;
    }

    .head2 {
      width: 88%;
      /* DESCRIPTION */
      color: green;
      font-family: 'calistoga', serif;
      font-weight: 400;
      font-size: 2.75rem;
      line-height: 2.88rem;
    }

    .table2 {
      width: auto;
      margin: 0rem 9% 1.25rem 9%;
      border-bottom: 1.75rem groove #dab471;
      /* mushrooms */
      border-right: 1.75rem groove #dab471;
      /* mushrooms */
      border-left: 1.75rem groove #dab471;
      /* mushrooms */
      font-family: 'roboto slab', serif;
      font-size: 2.25rem;
      line-height: 2.31rem;
      font-weight: bold;
      color: black;
    }

    .table2 tbody tr:nth-child(odd) {
      background-color: white;
    }

    .table2 tbody tr:nth-child(even) {
      background-color: #f3ffeb;
      /* PALE GREEN */
    }

    .table2 tbody tr td:nth-of-type(1) {
      border-right: .19rem solid black;
      text-align: center;
    }

    .table2 tbody tr td:nth-of-type(2) {
      border-right: .19rem solid black;
      text-align: left;
    }

    /* ━━━━━━━━━━ COLORS ━━━━━━━━━━━ */
    .ivory {
      color: #ffffee;
      text-align: center;
      margin: 2.25rem 0rem 2.25rem 0rem;
    }

    .blu {
      color: blue
    }

    .blub {
      color: blue;
      font-weight: bold;
    }

    .fusch {
      color: #ca009b
    }

    .fuschb {
      color: #ca009b;
      font-weight: bold
    }

    .fuschi {
      color: #ca009b;
      font-style: italic
    }

    .crim {
      color: crimson
    }

    .crimb {
      color: crimson;
      font-weight: bold
    }

    .crimi {
      color: crimson;
      font-style: italic
    }

    .grey {
      color: grey
    }

    .green {
      color: #248900
    }

    /* green */
    .greenb {
      color: #248900;
      font-weight: bold
    }

    /* ━━━━━━━━━ LINKS ━━━━━━━━━━━ */
    a:active {
      color: crimson
    }

    a:hover {
      color: crimson
    }

    a:link {
      color: blue
    }

    a:visited {
      color: blue
    }

    .redlink a:link {
      color: crimson
    }

    .redlink a:visited {
      color: crimson
    }

    .whlink a:link {
      color: #ffffee
    }

    /* ivory */
    .whlink a:visited {
      color: #ffffee
    }

    /* ivory */
    .bk1link a:link {
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.25rem;
      line-height: 2.31rem;
    }

    .bk1link a:visited {
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.25rem;
      line-height: 2.31rem;
    }

    .bk2link a:link {
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.5rem;
      line-height: 2.63rem;
    }

    .bk2link a:visited {
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.5rem;
      line-height: 2.63rem;
    }

    .bnlink a:link {
      padding-bottom: 10px;
      color: #dab471;
      /*  BROWN  */
      background: black;
      text-align: center;
      font-style: italic;
      font-family: 'roboto condensed', sans-serif;
      font-size: 1.88rem;
      line-height: 2rem;
      font-weight: 700;
    }

    .bnlink a:visited {
      padding-bottom: 10px;
      color: #dab471;
      /*  BROWN  */
      background: black;
      text-align: center;
      font-style: italic;
      font-family: 'roboto condensed', sans-serif;
      font-size: 1.88rem;
      line-height: 2rem;
      font-weight: 700;
    }

    /* ━━━━━━ MISCELLANEOUS ━━━━━━━ */
    .lead {
      padding: .8rem;
      width: auto;
      color: black;
      text-align: center;
      font-style: italic;
      font-family: 'crete round', serif;
      font-size: 4rem;
      line-height: 4.25rem;
      font-weight: bold;
    }

    .ctr {
      text-align: center
    }

    .undr {
      text-decoration: underline
    }

    .clamwh {
      color: #ffffee;
      /* IVORY */
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

    .clambu {
      color: #ebf6ff;
      /* PALE BLUE */
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

    .clambk {
      color: black;
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 5rem;
      font-weight: 900;
    }

    .clamcr {
      color: crimson;
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

    .clambu {
      color: blue;
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

/* ━━━━━ START SMOKE TAB ━━━━━ */
    /* animated tab */
    td.svg-header {
      padding: 1rem .5rem 0;
      background: white; /* #665e49 Dark Brown coordinayed w/border SAND #fff9e1; */
      border-bottom: 7px solid #000;
      border-top: 0px solid #000;
    }

    .svgtabs.onetab span {
      --tab1-color: #fff;
    }

    .svgtabs {
      width: 100%;
      margin: auto;
      display: flex;
      overflow: hidden;
    }

    .svgtabs a {
      color: #000;
      text-decoration: none;
      flex: 1 0 0;
      display: grid;
      align-items: center;
      grid-template-areas: "tab";
      position: relative;
      text-align: center;
      margin-right: -9rem;
      transition: 0.3s ease;
    }

    .svgtabs.onetab a {
      justify-content: center;
      margin-right: 0;
    }

    .svgtabs a:last-child {
      margin-right: 0 !important;
    }

    .svgtabs svg {
      display: block;
      grid-area: tab;
      position: relative;
      z-index: 1;
    }

    .svgtabs.onetab svg {
      width: 620px;
      height: 75px;
      top: 2px
    }

    .svgtabs span {
      grid-area: tab;
      position: relative;
      z-index: 2;
      padding: 11px .5rem 0;
      font-weight: bold;
      color: #000;
      font-style: italic;
      font-family: 'crete round', serif;
      font-size: 4rem;
      line-height: 4.25rem;
    }

    #test {
      height: 220px;
      animation: tab 15s infinite
    }

    @keyframes tab {
      0% {
        height: 200px;
        width: 260px;
      }

      50% {
        height: 140px;
        width: 180px;
      }

      100% {
        height: 200px;
        width: 260px
      }
    }
  </style>
</head>

<body>

  <div class="ssz1">
    This Is A Small Screen Zone*</div>
  <div class="ssz2">
    *Designed and built for SmartPhones<span class="clamlbu">!</span></div>

  <table class="table1">
    <thead>
      <tr>
        <th colspan="2">

          Table of Contents

        </th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td class="group1">A.</td>
        <td class="head1">PROJECTS</td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/index.html" target="_blank">Home</a></span>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/about.html" target="_blank">About</a></span>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          Table of Contents <span class="here">(You Are Here)</span></td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/0_thru_g/(shape-outside_ellipse)_01.html" target="_blank">&lt;shape-outside: ellipse&gt; 01</a></span>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">&lt;shape-outside: polygon&gt; 01</a></span>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/0_thru_g/2_flex_cols_nth_child_01.html" target="_blank">2_flex_columns_nth_child_01</a></span>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">Complex Business Letter Template</a></span> for 2 Addressees w&#47;USPS P.O.D. Counter Roll Sticker Positions
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/h_thru_z/rem_conversion_chart.html" target="_blank">REM Conversion Chart</a></span> Flex w&#47;nth Child
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/h_thru_z/vert_center_image_w_text_01.html" target="_blank">Vertically Center an Image</a></span> &amp; Horizontally Including Text w&#47;Page Counter Footer
        </td>
      </tr>

      <tr>
        <td class="svg-header" colspan="2">
          <div>
            <div class="svgtabs onetab">
              <a class="svgtab1" href="#">
                <span>Tabs!</span>
                <svg viewBox="0 0 164.042 15.843">
                  <clipPath id="shape">
                    <path id="front-fill" d="M121.772 232.987c-11.042 0-13.643 5.879-17.411 10.564-4.653 5.788-11.776 8.51-11.776 8.51h145.426s-7.123-2.722-11.776-8.51c-3.768-4.685-6.37-10.564-17.412-10.564Z" transform="translate(-83.277 -232.217)"/>
                  </clipPath>

                  <path style="fill:#000; stroke-width:4; stroke:#000" d="M121.772 232.217c-5.022 0-8.508 1.208-11.179 3.182-2.67 1.974-4.52 4.54-6.502 7.008-3.962 4.935-8.28 9.653-20.814 9.653h11.356c5.25-1.985 8.309-5.303 10.882-8.509 2.017-2.511 3.785-4.923 6.166-6.683 2.382-1.76 5.38-2.823 10.091-2.823h87.051c4.711 0 7.71 1.062 10.091 2.823 2.382 1.76 4.15 4.172 6.166 6.683 2.574 3.206 5.633 6.524 10.882 8.51h11.357c-12.534 0-16.852-4.72-20.815-9.654-1.98-2.468-3.83-5.034-6.501-7.008-2.671-1.974-6.157-3.182-11.18-3.182Z" transform="translate(-83.277 -232.217)" />

                  <image id="test" width="270" height="220" href="https://assets.codepen.io/74047/PARCHMENT-A.jpg" clip-path="url(#shape)" />
                </svg>
              </a>
            </div>
        </td>
      </tr>

      <tr>
        <td class="group1">B.</td>
        <td class="head1">CSS &mdash; PARCHMENT w&#47;BORDER</td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB CSSPAR1</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB CSSPAR1_ANI</a> &#47; ANIMATED &mdash; Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS CSSPAR2</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS CSSPAR_ANI</a> &#47; ANIMATED &mdash; Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS CSSPAR3</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS CSSPAR3_ANI</a> &#47; ANIMATED</a> Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS CSSPAR7</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="group1">C.</td>
        <td class="head1">CSS &mdash; SOLID w&#47;BORDER</td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB CSSTAB1BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS CSSTABS2BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS CSSTABS3BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS CSSTABS7BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="group1">D.</td>
        <td class="head1">CSS &mdash; SOLID <i>NO</i> BORDER</td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB CSSTAB1</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS CSSTABS2</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS CSSTABS3</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS CSSTABS7</a> &mdash; Coming Soon!
        </td>
      </tr>
    </tbody>
  </table>

  <table class="table2">
    <tbody>
      <tr>
        <td class="group2">E.</td>
        <td class="head2">SVG &mdash; SOLID w&#47;BORDER</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB SVGTAB1BDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGTABS2BDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGTABS3BDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS SVGTABS7BDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="group2">F.</td>
        <td class="head2">SVG &mdash; SOLID <i>NO</i> BORDER</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB SVGTAB1</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGTABS2</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGTABS3</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS SVGTABS7</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="group2">G.</td>
        <td class="head2">SVG &mdash; PATTERN w&#47;BORDER</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB SVGTAB1PATTBDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGTABS2PATTBDR</a></span> &mdash; Coming!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGTABS3PATT3BDR</a></span> &mdash; Coming!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS SVGTABS7PATTBDR</a></span> &mdash; Coming!</td>
      </tr>
      <tr>
        <td class="group2">H.</td>
        <td class="head2">SVG &mdash; PATTERN <i>NO</i> BORDER</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB SVGTAB1PATT</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGTABS2PATT</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGTABS3PATT</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS SVGTABS7PATT</a></span> &mdash; Coming Soon!<br>&nbsp;</td>
      </tr>
    </tbody>
  </table>

  <div class="ivory">
    Got Questions? You can PM me at<br>
    <span class="whlink">
      <a href="https://sitepoint.com/community/c/html-css/25">the Sitepoint Forums</a></span><span class="clamwh">!</span>
    <br>
    <br>
  </div>
  <div class="thanks">
    The author would like to thank Paul O&rsquo;Brien and &ldquo;snadyleiby&rdquo; of the Sitepoint Forums for (EVERYTHING!) as well as the fine artists at Inkscape Forum for their valuable contribution in rendering
    <div class="hilite">3 very clean masters of the tabs in SVG</div>
    most especially &ldquo;polygon&rdquo; and &ldquo;tyler&rdquo;. You guys are the best! Until we meet again&nbsp;.&nbsp;.&nbsp;.
  </div>

</body>
</html>

That seems to do what you want for the bottom of the page.?

I can’t really understand what you want for the header? Did you mean something like this?

Maybe drawing will help.

Back later thhis evening as I have to go out for a few hours.

1 Like

I’m producing the effect that gets me as close to it as I can. Snady accidentally used an older model toc — the one where I messed up the %s (as you pointed out) — so I’m trying to go in and correct them but I don’t want to mess up his SVG!!! He worked so hard to get to that 10px border and I love it. So let me delicately work around his older toc and upload the closest I can get to giving you a visual representation that replicates the problem with the bottom border.

Well this is the most bizarre thing I think I’ve ever encountered in all my decades of coding. I got the toc to show its mitred corners not just on the heading but in the bottom third table.

That I already don’t understand (?) but then comes this:

The main body of the table is not supposed to have a thin black line on every one of its rows . . . but it does. Can someone please run this up the flagpole for me and tell me: does your image show each of the rows with a thin black border spanning the width of the table?

Because you see, I didn’t put them there. And I cant find where they are in the CSS!!! :flushed: I specifically removed them because I don’t want them there. This is a link-centric page and I don’t want the rows to have borders.

<!DOCTYPE html>
<HTML LANG="en">

<HEAD>
  <meta http-equiv="Content-Type" content="text/html; 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=Roboto:wght@100;200;300;400;500;600;700;800;900&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+Condensed: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=Calistoga&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&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=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">

  <title>TABLE OF CONTENTS &#7172; semicodin</title>

  <style>

body {
    width: 1080px;
    background-color: black;
    margin: 0 auto;
    color: black;
    font-family: 'roboto slab', serif;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 2.63rem;
}

#counter {
    text-align: center;
    position: absolute;
    bottom: 0;
    max-width: 100%;
}

.ssz1 {
    margin-top: 3.13rem;
    text-align: center;
    font-family: 'crete round';
    font-size: 2rem;
    line-height: 2.25rem;
    font-weight: bold;
    color: #ebf6ff;
    /* PALE BLUE */
}

.ssz2 {
    text-align: center;
    margin-bottom: 1.75rem;
    font-family: 'crete round';
    font-size: 1.75rem;
    line-height: 2rem;
    font-weight: bold;
    color: #ebf6ff;
    /* PALE BLUE */
}

.henpen {
    text-align: center;
    color: #ffffee;
    /* ivory */
    margin: 2.5rem 16% 0rem 16%;
    font-size: 3.75rem;
    line-height: 3.88;
    font-weight: 700;
    font-family: 'Henny Penny', cursive;
}

.here {
    color: #888888;
    font-family: 'roboto slab', serif;
    font-weight: 400;
    font-size: 2.25rem;
    line-height: 2.31rem;
}

.thanks {
    margin: 2.5rem 15% 6.25rem 15%;
    color: #ffffee;
    /* ivory */
    text-align: center;
    font-style: italic;
    font-family: 'crete round', serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}

.hilite {
    margin: 0rem 3.38rem 0rem 3.38rem;
    text-align: center;
    font-style: italic;
    color: black;
    background-color: white;
    font-family: 'crete round', serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
    padding-top: .5rem;
    padding-right: .8rem;
    padding-bottom: .6rem;
    padding-left: .8rem;
}

    td {
    padding-top: .5rem;
    padding-right: .5rem;
    padding-bottom: .6rem;
    padding-left: .8rem;
}

body {
    width: 1080px;
    background-color: black;
    margin: 0 auto;
    color: black;
    font-family: 'roboto slab', serif;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 2.63rem;
}

#counter {
    text-align: center;
    position: absolute;
    bottom: 0;
    max-width: 100%;
}

.ssz1 {
    margin-top: 3.13rem;
    text-align: center;
    font-family: 'crete round';
    font-size: 2rem;
    line-height: 2.25rem;
    font-weight: bold;
    color: #ebf6ff;
    /* PALE BLUE */
}

.ssz2 {
    text-align: center;
    margin-bottom: 1.75rem;
    font-family: 'crete round';
    font-size: 1.75rem;
    line-height: 2rem;
    font-weight: bold;
    color: #ebf6ff;
    /* PALE BLUE */
}

.henpen {
    text-align: center;
    color: #ffffee;
    /* ivory */
    margin: 2.5rem 16% 0rem 16%;
    font-size: 3.75rem;
    line-height: 3.88;
    font-weight: 700;
    font-family: 'Henny Penny', cursive;
}

.thanks {
    margin: 2.5rem 15% 6.25rem 15%;
    color: #ffffee;  /* ivory */
    text-align: center;
    font-style: italic;
    font-family: 'crete round', serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}

.hilite {
    margin: 0rem 3.38rem 0rem 3.38rem;
    text-align: center;
    font-style: italic;
    color: black;
    background-color: white;
    font-family: 'crete round', serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
    padding-top: .5rem;
    padding-right: .8rem;
    padding-bottom: .6rem;
    padding-left: .8rem;
}

    td {
    padding-top: .5rem;
    padding-right: .5rem;
    padding-bottom: .6rem;
    padding-left: .8rem;
}

.here {
    color: #888888;
    font-family: 'roboto slab', serif;
    font-weight: 400;
    font-size: 2.25rem;
    line-height: 2.31rem;
}

/* ━━━━━━━━ TABLE 1 ━━━━━━━━ */

.table1 {
    width: 86%;
    margin: 0rem 7% 0rem 7%;
    border: 1.75rem groove #dab471;  /* was #bbac86;  mushrooms */
    padding: .8rem;
    color: #ffffee; /* ivory */
    text-align: center;
    font-style: italic;
    background-color: black;
    font-family: 'crete round', serif;
    font-size: 4rem;
    line-height: 4.25rem;
    font-weight: bold;
}

/* ━━━━━━━━ TABLE 2 ━━━━━━━━ */

.table2 {
    width: 86%;
    margin: 0rem 7% 0rem 7%;
    border-left: 1.75rem groove #dab471;
    border-right: 1.75rem groove #dab471;
    font-family: 'roboto slab', serif;
    font-size: 2.25rem;
    line-height: 2.31rem;
    font-weight: bold;
    color: black;
}
.group2 {
    /*   CLASS LETTER (A-D)  */
    width: 8%;
    color: blue;
    font-family: 'calistoga', serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 2.88rem;
}

.head2 {
    width: 92%;, /* DESCRIPTION */
    color: blue;
    font-family: 'calistoga', serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 2.88rem;
}

.table2 tbody tr:nth-child(odd) {
    background-color: white;
}

.table2 tbody tr:nth-child(even) {
    background-color: #ebf6ff; /* PALE BLUE */
}

    /* ━━━━━━━━ TABLE 3 ━━━━━━━━ */

.table3 {
    width: 86%;
    margin: 0rem 7% 1.25rem 7%;
    border-left: 1.75rem groove #dab471;
    border-right: 1.75rem groove #dab471;
    border-bottom: 1.75rem groove #dab471;
    font-family: 'roboto slab', serif;
    font-size: 2.25rem;
    line-height: 2.31rem;
    font-weight: bold;
    color: black;
}

.group3 {
    width: 8%;  /* CLASS LETTER (E-H) */
    font-family: 'calistoga', serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 2.88rem;
    color: green;
}

.head3 {
    width: 92%;  /* DESCRIPTION */
    color: green;
    font-family: 'calistoga', serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 2.88rem;
}

.table3 tbody tr:nth-child(odd) {
    background-color: white;
}

.table3 tbody tr:nth-child(even) {
    background-color: #f3ffeb; /* PALE GREEN */
}

    /* ━━━━━━━━━━ COLORS ━━━━━━━━━━━ */
    .ivory {
      color: #ffffee;
      text-align: center;
      margin: 2.25rem 0rem 2.25rem 0rem;
    }

    .blu {
      color: blue
    }

    .blub {
      color: blue;
      font-weight: bold;
    }

    .fusch {
      color: #ca009b
    }

    .fuschb {
      color: #ca009b;
      font-weight: bold
    }

    .fuschi {
      color: #ca009b;
      font-style: italic
    }

    .crim {
      color: crimson
    }

    .crimb {
      color: crimson;
      font-weight: bold
    }

    .crimi {
      color: crimson;
      font-style: italic
    }

    .grey {
      color: grey
    }

    .green {
      color: #248900
    }

    /* green */
    .greenb {
      color: #248900;
      font-weight: bold
    }

    /* ━━━━━━━━━ LINKS ━━━━━━━━━━━ */
    a:active {
      color: crimson
    }

    a:hover {
      color: crimson
    }

    a:link {
      color: blue
    }

    a:visited {
      color: blue
    }

    .redlink a:link {
      color: crimson
    }

    .redlink a:visited {
      color: crimson
    }

.pchlink a:link {
    color: #8D4000
}
.pchlink a:visited {
    color: #8D4000
}

    .whlink a:link {
      color: #ffffee
    }

    /* ivory */
    .whlink a:visited {
      color: #ffffee
    }

    /* ivory */
    .bk1link a:link {
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.25rem;
      line-height: 2.31rem;
    }

    .bk1link a:visited {
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.25rem;
      line-height: 2.31rem;
    }

    .bk2link a:link {
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.5rem;
      line-height: 2.63rem;
    }

    .bk2link a:visited {
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.5rem;
      line-height: 2.63rem;
    }

    .bnlink a:link {
      padding-bottom: 10px;
      color: #bbac86;
      /*  BROWN  */
      background: black;
      text-align: center;
      font-style: italic;
      font-family: 'roboto condensed', sans-serif;
      font-size: 1.88rem;
      line-height: 2rem;
      font-weight: 700;
    }

    .bnlink a:visited {
      padding-bottom: 10px;
      color: #bbac86;
      /*  BROWN  */
      background: black;
      text-align: center;
      font-style: italic;
      font-family: 'roboto condensed', sans-serif;
      font-size: 1.88rem;
      line-height: 2rem;
      font-weight: 700;
    }

    /* ━━━━━━ MISCELLANEOUS ━━━━━━━ */
    .lead {
      padding: .8rem;
      width: auto;
      color: black;
      text-align: center;
      font-style: italic;
      font-family: 'crete round', serif;
      font-size: 4rem;
      line-height: 4.25rem;
      font-weight: bold;
    }

    .ctr {
      text-align: center
    }

    .undr {
      text-decoration: underline
    }

    .clamwh {
      color: #ffffee;
      /* IVORY */
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

    .clambu {
      color: #ebf6ff;
      /* PALE BLUE */
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

    .clambk {
      color: black;
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 5rem;
      font-weight: 900;
    }

    .clamcr {
      color: crimson;
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

    .clamye {
      color: yellow;
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

/* ━━━━━ START SMOKE TAB ━━━━━ */
    /* animated tab */
    td.svg-header {
      padding: 1rem .5rem 0;
      background: white; /* #665e49 Dark Brown coordinayed w/border SAND #fff9e1; */
      border-bottom: 7px solid #000;
      border-top: 0px solid #000;
    }

    .svgtabs.onetab span {
      --tab1-color: #fff;
    }

    .svgtabs {
      width: 100%;
      margin: auto;
      display: flex;
      overflow: hidden;
    }

    .svgtabs a {
      color: #000;
      text-decoration: none;
      flex: 1 0 0;
      display: grid;
      align-items: center;
      grid-template-areas: "tab";
      position: relative;
      text-align: center;
      margin-right: -9rem;
      transition: 0.3s ease;
    }

    .svgtabs.onetab a {
      justify-content: center;
      margin-right: 0;
    }

    .svgtabs a:last-child {
      margin-right: 0 !important;
    }

    .svgtabs svg {
      display: block;
      grid-area: tab;
      position: relative;
      z-index: 1;
    }

    .svgtabs.onetab svg {
      width: 620px;
      height: 75px;
      top: 2px
    }

    .svgtabs span {
      grid-area: tab;
      position: relative;
      z-index: 2;
      padding: 11px .5rem 0;
      font-weight: bold;
      color: #000;
      font-style: italic;
      font-family: 'crete round', serif;
      font-size: 4rem;
      line-height: 4.25rem;
    }

    #test {
      height: 220px;
      animation: tab 15s infinite
    }

    @keyframes tab {
      0% {
        height: 200px;
        width: 260px;
      }

      50% {
        height: 140px;
        width: 180px;
      }

      100% {
        height: 200px;
        width: 260px
      }
    }

.new {
      color: yellow;
      background-color: crimson;
      margin-left: 1.5rem;
      font-family: 'crete round', serif;
      font-size: 2rem;
      line-height: 2.25rem;
      font-weight: bold;
      padding-top: .4rem;
      padding-right: .6rem;
      padding-bottom: .4rem;
      padding-left: .6rem;


  </style>
</head>

<body>

  <div class="ssz1">
    This Is A Small Screen Zone*</div>
  <div class="ssz2">
    *Designed and built for SmartPhones<span class="clamlbu">!</span></div>

  <table class="table1">
    <tbody>
      <tr>
        <td>
          Table of Contents
        </td>
      </tr>
    </tbody>
  </table>

<table class="table2">
    <tbody>
      <tr>
        <td class="group2">A.</td>
        <td class="head2">PROJECTS</td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/index.html" target="_blank">Home</a>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/about.html" target="_blank">About</a> <span class="new">NEW<span class="clamye">!</span></span>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          Table of Contents <span class="here">(You Are Here)</span></td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/0_thru_g/(shape-outside_ellipse)_01.html" target="_blank">&lt;shape-outside: ellipse&gt; 01</a>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">&lt;shape-outside: polygon&gt; 01</a>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/0_thru_g/2_flex_cols_nth_child_01.html" target="_blank">2_flex_columns_nth_child_01</a>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">Template Complex Business Letter for 2 Addressees</a> w&#47;Sticker Positions from USPS P.O.D. Counter Rolls
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/0_thru_g/3_col_flex_rem_conversion_chart.html" target="_blank">REM Conversion Chart</a> Flex w&#47;nth Child
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/h_thru_z/vert_center_image_w_text_01.html" target="_blank">Vertically Center an Image</a> &amp; Horizontally Including Text w&#47;Page Counter Footer
        </td>
      </tr>

      <tr>
        <td class="svg-header" colspan="2">
          <div>
            <div class="svgtabs onetab">
              <a class="svgtab1" href="#">
                <span>Tabs!</span>
                <svg viewBox="0 0 164.042 15.843">
                  <clipPath id="shape">
                    <path id="front-fill" d="M121.772 232.987c-11.042 0-13.643 5.879-17.411 10.564-4.653 5.788-11.776 8.51-11.776 8.51h145.426s-7.123-2.722-11.776-8.51c-3.768-4.685-6.37-10.564-17.412-10.564Z" transform="translate(-83.277 -232.217)"/>
                  </clipPath>

                  <path style="fill:#000; stroke-width:4; stroke:#000" d="M121.772 232.217c-5.022 0-8.508 1.208-11.179 3.182-2.67 1.974-4.52 4.54-6.502 7.008-3.962 4.935-8.28 9.653-20.814 9.653h11.356c5.25-1.985 8.309-5.303 10.882-8.509 2.017-2.511 3.785-4.923 6.166-6.683 2.382-1.76 5.38-2.823 10.091-2.823h87.051c4.711 0 7.71 1.062 10.091 2.823 2.382 1.76 4.15 4.172 6.166 6.683 2.574 3.206 5.633 6.524 10.882 8.51h11.357c-12.534 0-16.852-4.72-20.815-9.654-1.98-2.468-3.83-5.034-6.501-7.008-2.671-1.974-6.157-3.182-11.18-3.182Z" transform="translate(-83.277 -232.217)" />

                  <image id="test" width="270" height="220" href="https://assets.codepen.io/74047/PARCHMENT-A.jpg" clip-path="url(#shape)" />
                </svg>
              </a>
            </div>
        </td>
      </tr>

      <tr>
        <td class="group2">B.</td>
        <td class="head2">CSS & SVG &#9753; PARCHMENT & SMOKE</td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB CSSPAR1</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
          <a href="https://semicodin.nekoweb.org/h_thru_z/svgpar1_ani.html" target="_blank">1 TAB SVGPAR1_ANI</a></span> &#47; ANIMATED <span class="new">NEW<span class="clamye">!</span></span>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS CSSPAR2</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGPAR2_ANI</a></span> &#47; ANIMATED &mdash; Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS CSSPAR3</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGPAR3_ANI</a></span> &#47; ANIMATED Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS CSSPAR7</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="group2">C.</td>
        <td class="head2">CSS &mdash; SOLID w&#47;BORDER</td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB CSSTAB1BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS CSSTABS2BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS CSSTABS3BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS CSSTABS7BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="group2">D.</td>
        <td class="head2">CSS &mdash; SOLID <i>NO</i> BORDER</td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB CSSTAB1</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS CSSTABS2</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS CSSTABS3</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS CSSTABS7</a> &mdash; Coming Soon!
        </td>
      </tr>
    </tbody>
  </table>

  <table class="table3">
    <tbody>
      <tr>
        <td class="group3">E.</td>
        <td class="head3">SVG &mdash; SOLID w&#47;BORDER</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB SVGTAB1BDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGTABS2BDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGTABS3BDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS SVGTABS7BDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="group3">F.</td>
        <td class="head3">SVG &mdash; SOLID <i>NO</i> BORDER</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB SVGTAB1</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGTABS2</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGTABS3</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS SVGTABS7</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="group3">G.</td>
        <td class="head3">SVG &mdash; PATTERN w&#47;BORDER</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB SVGTAB1PATTBDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGTABS2PATTBDR</a></span> &mdash; Coming!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGTABS3PATT3BDR</a></span> &mdash; Coming!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS SVGTABS7PATTBDR</a> &mdash; Coming!</td>
      </tr>
      <tr>
        <td class="group3">H.</td>
        <td class="head3">SVG &mdash; PATTERN <i>NO</i> BORDER</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB SVGTAB1PATT</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGTABS2PATT</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGTABS3PATT</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS SVGTABS7PATT</a></span> &mdash; Coming Soon!<br>&nbsp;</td>
      </tr>
    </tbody>
  </table>

  <div class="ivory">
    Got Questions? You can PM me at<br>
    <span class="whlink">
      <a href="https://sitepoint.com/community/c/html-css/25">the Sitepoint Forums</a></span><span class="clamwh">!</span>
    <br>
    <br>
  </div>
  <div class="thanks">
    The author would like to thank Paul O&rsquo;Brien of the Sitepoint Forums for EVERYTHING as well as the fine artists at Inkscape Forum for their valuable contribution in rendering
    <div class="hilite">3 very clean masters of the tabs in SVG</div>
    most especially &ldquo;polygon&rdquo; and &ldquo;tyler&rdquo;. You guys are the best! Until we meet again&nbsp;.&nbsp;.&nbsp;.
  </div>

By default table cells have 2px of border-spacing when using the default border-collapse: separate property/value. The black you see is merely the background under the table showing through.

If you use border-collapse :collapse then that 2px is collapsed to nothing which is what you were using previously.

However as you need the separate value for border-collapse property to get your mitred borders you will need to set the border-spacing value to zero.

.table2,.table3{
  border-spacing:0;
}
1 Like

Maestro I thought I was losing my mind! lol :face_holding_back_tears: I kept looking at the code. Walking away from it. Coming back to it. Well thank you for explaining a small piece of arcane Tables 101 technology. I’ll go make the corrections now . . .

It’s still not done having its way with me although I hope this is easier:

I do want the <td>s to have their little borders (in other words, I want to preserve the vertical line that they make). How would you recommend I proceed?

You had a rule for that with a right border on the td. :slight_smile:

1 Like

I tried this but no go:

table td {
    border: .2 solid black;
    padding-top: .5rem;
    padding-right: .5rem;
    padding-bottom: .6rem;
    padding-left: .8rem;
}

border-right: 2px solid #000

You might only want it on the first td in a row and as I said you already had a rule for that.

1 Like

You mean I have to do this inline?? Oh maaaaan . . .

Alright here is the hopefully final version of this if anyone’s interested. I can’t believe there wasn’t an nth childish way of doing this . . .

<!DOCTYPE html>
<HTML LANG="en">

<HEAD>
  <meta http-equiv="Content-Type" content="text/html; 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=Roboto:wght@100;200;300;400;500;600;700;800;900&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+Condensed: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=Calistoga&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&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=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">

  <title>TABLE OF CONTENTS &#7172; semicodin</title>

  <style>

body {
    width: 1080px;
    background-color: black;
    margin: 0 auto;
    color: black;
    font-family: 'roboto slab', serif;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 2.63rem;
}

#counter {
    text-align: center;
    position: absolute;
    bottom: 0;
    max-width: 100%;
}

.ssz1 {
    margin-top: 3.13rem;
    text-align: center;
    font-family: 'crete round';
    font-size: 2rem;
    line-height: 2.25rem;
    font-weight: bold;
    color: #ebf6ff;
    /* PALE BLUE */
}

.ssz2 {
    text-align: center;
    margin-bottom: 1.75rem;
    font-family: 'crete round';
    font-size: 1.75rem;
    line-height: 2rem;
    font-weight: bold;
    color: #ebf6ff;
    /* PALE BLUE */
}

.henpen {
    text-align: center;
    color: #ffffee;
    /* ivory */
    margin: 2.5rem 16% 0rem 16%;
    font-size: 3.75rem;
    line-height: 3.88;
    font-weight: 700;
    font-family: 'Henny Penny', cursive;
}

.here {
    color: #888888;
    font-family: 'roboto slab', serif;
    font-weight: 400;
    font-size: 2.25rem;
    line-height: 2.31rem;
}

.thanks {
    margin: 2.5rem 15% 6.25rem 15%;
    color: #ffffee;
    /* ivory */
    text-align: center;
    font-style: italic;
    font-family: 'crete round', serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}

.hilite {
    margin: 0rem 3.38rem 0rem 3.38rem;
    text-align: center;
    font-style: italic;
    color: black;
    background-color: white;
    font-family: 'crete round', serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
    padding-top: .5rem;
    padding-right: .8rem;
    padding-bottom: .6rem;
    padding-left: .8rem;
}

td {
    padding-top: .5rem;
    padding-right: .5rem;
    padding-bottom: .6rem;
    padding-left: .8rem;
}

.table2,.table3{
    border-spacing:0;
}
.jot {
    border-right: 3px solid black
}

/* ▬▬▬▬▬▬▬ TABLE 1 ▬▬▬▬▬▬▬ */

.table1 {
    width: 86%;
    margin: 0rem 7% 0rem 7%;
    border: 1.75rem groove #dab471;
    padding: .8rem;
    color: #ffffee; /* ivory */
    text-align: center;
    font-style: italic;
    background-color: black;
    font-family: 'crete round', serif;
    font-size: 4rem;
    line-height: 4.25rem;
    font-weight: bold;
}


.group1 {
    /*   CLASS LETTER (A)  */
    width: 8%;
    color: crimson;
    border-right: 3px solid black;
    font-family: 'calistoga', serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 2.88rem;
}
.head1 {
    width: 92%; /* DESCRIPTION */
    color: crimson;
    border-right: 3px solid black;
    font-family: 'calistoga', serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 2.88rem;
}

/* ▬▬▬▬▬▬▬ TABLE 2 ▬▬▬▬▬▬▬ */

.table2 {
    width: 86%;
    margin: 0rem 7% 0rem 7%;
    border-left: 1.75rem groove #dab471;
    border-right: 1.75rem groove #dab471;
    font-family: 'roboto slab', serif;
    font-size: 2.25rem;
    line-height: 2.31rem;
    font-weight: bold;
    color: black;
}
.group2 {
    /*   CLASS LETTER (B-D)  */
    width: 8%;
    color: blue;
    border-right: 3px solid black;
    font-family: 'calistoga', serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 2.88rem;
}

.head2 {
    width: 92%; /* DESCRIPTION */
    color: blue;
    border-right: 3px solid black;
    font-family: 'calistoga', serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 2.88rem;
}

.table2 tbody tr:nth-child(odd) {
    background-color: white;
}

.table2 tbody tr:nth-child(even) {
    background-color: #ebf6ff; /* PALE BLUE */
}

/* ▬▬▬▬▬▬▬ TABLE 3 ▬▬▬▬▬▬▬ */

.table3 {
    width: 86%;
    margin: 0rem 7% 1.25rem 7%;
    border-left: 1.75rem groove #dab471;
    border-right: 1.75rem groove #dab471;
    border-bottom: 1.75rem groove #dab471;
    font-family: 'roboto slab', serif;
    font-size: 2.25rem;
    line-height: 2.31rem;
    font-weight: bold;
    color: black;
}

.group3 {
    width: 8%;  /* CLASS LETTER (E-H) */
    color: green;
    border-right: 3px solid black;
    font-family: 'calistoga', serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 2.88rem;
}

.head3 {
    width: 92%;  /* DESCRIPTION */
    color: green;
    border-right: 3px solid black;
    font-family: 'calistoga', serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 2.88rem;
}

.table3 tbody tr:nth-child(odd) {
    background-color: white;
}

.table3 tbody tr:nth-child(even) {
    background-color: #f3ffeb; /* PALE GREEN */
}

    /* ━━━━━━━━━━ COLORS ━━━━━━━━━━━ */
    .ivory {
      color: #ffffee;
      text-align: center;
      margin: 2.25rem 0rem 2.25rem 0rem;
    }

    .blu {
      color: blue
    }

    .blub {
      color: blue;
      font-weight: bold;
    }

    .fusch {
      color: #ca009b
    }

    .fuschb {
      color: #ca009b;
      font-weight: bold
    }

    .fuschi {
      color: #ca009b;
      font-style: italic
    }

    .crim {
      color: crimson
    }

    .crimb {
      color: crimson;
      font-weight: bold
    }

    .crimi {
      color: crimson;
      font-style: italic
    }

    .grey {
      color: grey
    }

    .green {
      color: #248900
    }

    /* green */
    .greenb {
      color: #248900;
      font-weight: bold
    }

    /* ━━━━━━━━━ LINKS ━━━━━━━━━━━ */
    a:active {
      color: crimson
    }

    a:hover {
      color: crimson
    }

    a:link {
      color: blue
    }

    a:visited {
      color: blue
    }

    .redlink a:link {
      color: crimson
    }

    .redlink a:visited {
      color: crimson
    }

.pchlink a:link {
    color: #8D4000
}
.pchlink a:visited {
    color: #8D4000
}

    .whlink a:link {
      color: #ffffee
    }

    /* ivory */
    .whlink a:visited {
      color: #ffffee
    }

    /* ivory */
    .bk1link a:link {
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.25rem;
      line-height: 2.31rem;
    }

    .bk1link a:visited {
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.25rem;
      line-height: 2.31rem;
    }

    .bk2link a:link {
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.5rem;
      line-height: 2.63rem;
    }

    .bk2link a:visited {
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.5rem;
      line-height: 2.63rem;
    }

    .bnlink a:link {
      padding-bottom: 10px;
      color: #bbac86;
      /*  BROWN  */
      background: black;
      text-align: center;
      font-style: italic;
      font-family: 'roboto condensed', sans-serif;
      font-size: 1.88rem;
      line-height: 2rem;
      font-weight: 700;
    }

    .bnlink a:visited {
      padding-bottom: 10px;
      color: #bbac86;
      /*  BROWN  */
      background: black;
      text-align: center;
      font-style: italic;
      font-family: 'roboto condensed', sans-serif;
      font-size: 1.88rem;
      line-height: 2rem;
      font-weight: 700;
    }

    /* ━━━━━━ MISCELLANEOUS ━━━━━━━ */
    .lead {
      padding: .8rem;
      width: auto;
      color: black;
      text-align: center;
      font-style: italic;
      font-family: 'crete round', serif;
      font-size: 4rem;
      line-height: 4.25rem;
      font-weight: bold;
    }

    .ctr {
      text-align: center
    }

    .undr {
      text-decoration: underline
    }

    .clamwh {
      color: #ffffee;
      /* IVORY */
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

    .clambu {
      color: #ebf6ff;
      /* PALE BLUE */
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

    .clambk {
      color: black;
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 5rem;
      font-weight: 900;
    }

    .clamcr {
      color: crimson;
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

    .clamye {
      color: yellow;
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

/* ▬▬▬▬▬ START SMOKE TAB ▬▬▬▬ */
            /* ANIMATED  */
    td.svg-header {
      padding: 1rem .5rem 0;
      background: white;
      border-bottom: 7px solid #000;
      border-top: 0px solid #000;
    }

    .svgtabs.onetab span {
      --tab1-color: #fff;
    }

    .svgtabs {
      width: 100%;
      margin: auto;
      display: flex;
      overflow: hidden;
    }

    .svgtabs a {
      color: #000;
      text-decoration: none;
      flex: 1 0 0;
      display: grid;
      align-items: center;
      grid-template-areas: "tab";
      position: relative;
      text-align: center;
      margin-right: -9rem;
      transition: 0.3s ease;
    }

    .svgtabs.onetab a {
      justify-content: center;
      margin-right: 0;
    }

    .svgtabs a:last-child {
      margin-right: 0 !important;
    }

    .svgtabs svg {
      display: block;
      grid-area: tab;
      position: relative;
      z-index: 1;
    }

    .svgtabs.onetab svg {
      width: 620px;
      height: 75px;
      top: 2px
    }

    .svgtabs span {
      grid-area: tab;
      position: relative;
      z-index: 2;
      padding: 11px .5rem 0;
      font-weight: bold;
      color: #000;
      font-style: italic;
      font-family: 'crete round', serif;
      font-size: 4rem;
      line-height: 4.25rem;
    }

    #test {
      height: 220px;
      animation: tab 15s infinite
    }

    @keyframes tab {
      0% {
        height: 200px;
        width: 260px;
      }

      50% {
        height: 140px;
        width: 180px;
      }

      100% {
        height: 200px;
        width: 260px
      }
    }

.new {
      color: yellow;
      background-color: crimson;
      margin-left: 1.5rem;
      font-family: 'crete round', serif;
      font-size: 2rem;
      line-height: 2.25rem;
      font-weight: bold;
      padding-top: .4rem;
      padding-right: .6rem;
      padding-bottom: .4rem;
      padding-left: .6rem;

/* ▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬ */
</style>
</head>

<body>

  <div class="ssz1">
   This Is A Small Screen Zone*</div>
  <div class="ssz2">
    *Designed and built for SmartPhones<span class="clamlbu">!</span></div>

  <table class="table1">
    <tbody>
      <tr>
        <td>
          Table of Contents
        </td>
      </tr>
    </tbody>
  </table>

<table class="table2">
    <tbody>
      <tr>
        <td class="group1">A.</td>
        <td class="head1">PROJECTS</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/index.html" target="_blank">Home</a>
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/about.html" target="_blank">About</a> <span class="new">NEW<span class="clamye">!</span></span>
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          Table of Contents <span class="here">(You Are Here)</span></td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/0_thru_g/(shape-outside_ellipse)_01.html" target="_blank">&lt;shape-outside: ellipse&gt; 01</a>
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">&lt;shape-outside: polygon&gt; 01</a>
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/0_thru_g/2_flex_cols_nth_child_01.html" target="_blank">2_flex_columns_nth_child_01</a>
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">Template Complex Business Letter for 2 Addressees</a> w&#47;Sticker Positions from USPS P.O.D. Counter Rolls
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/0_thru_g/3_col_flex_rem_conversion_chart.html" target="_blank">REM Conversion Chart</a> Flex w&#47;nth Child
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/h_thru_z/vert_center_image_w_text_01.html" target="_blank">Vertically Center an Image</a> &amp; Horizontally Including Text w&#47;Page Counter Footer
        </td>
      </tr>

      <tr>
        <td class="svg-header" colspan="2">
          <div>
            <div class="svgtabs onetab">
              <a class="svgtab1" href="#">
                <span>Tabs!</span>
                <svg viewBox="0 0 164.042 15.843">
                  <clipPath id="shape">
                    <path id="front-fill" d="M121.772 232.987c-11.042 0-13.643 5.879-17.411 10.564-4.653 5.788-11.776 8.51-11.776 8.51h145.426s-7.123-2.722-11.776-8.51c-3.768-4.685-6.37-10.564-17.412-10.564Z" transform="translate(-83.277 -232.217)"/>
                  </clipPath>

                  <path style="fill:#000; stroke-width:4; stroke:#000" d="M121.772 232.217c-5.022 0-8.508 1.208-11.179 3.182-2.67 1.974-4.52 4.54-6.502 7.008-3.962 4.935-8.28 9.653-20.814 9.653h11.356c5.25-1.985 8.309-5.303 10.882-8.509 2.017-2.511 3.785-4.923 6.166-6.683 2.382-1.76 5.38-2.823 10.091-2.823h87.051c4.711 0 7.71 1.062 10.091 2.823 2.382 1.76 4.15 4.172 6.166 6.683 2.574 3.206 5.633 6.524 10.882 8.51h11.357c-12.534 0-16.852-4.72-20.815-9.654-1.98-2.468-3.83-5.034-6.501-7.008-2.671-1.974-6.157-3.182-11.18-3.182Z" transform="translate(-83.277 -232.217)" />

                  <image id="test" width="270" height="220" href="https://assets.codepen.io/74047/PARCHMENT-A.jpg" clip-path="url(#shape)" />
                </svg>
              </a>
            </div>
          </div>
        </td>
      </tr>

      <tr>
        <td class="group2">B.</td>
        <td class="head2">CSS & SVG &#9753; PARCHMENT & SMOKE</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB CSSPAR1</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
          <a href="https://semicodin.nekoweb.org/h_thru_z/svgpar1_ani.html" target="_blank">1 TAB SVGPAR1_ANI</a></span> &#47; ANIMATED <span class="new">NEW<span class="clamye">!</span></span>
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS CSSPAR2</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGPAR2_ANI</a></span> &#47; ANIMATED &mdash; Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS CSSPAR3</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGPAR3_ANI</a></span> &#47; ANIMATED Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS CSSPAR7</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="group2">C.</td>
        <td class="head2">CSS &mdash; SOLID w&#47;BORDER</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB CSSTAB1BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS CSSTABS2BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS CSSTABS3BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS CSSTABS7BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="group2">D.</td>
        <td class="head2">CSS &mdash; SOLID <i>NO</i> BORDER</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB CSSTAB1</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS CSSTABS2</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS CSSTABS3</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS CSSTABS7</a> &mdash; Coming Soon!
        </td>
      </tr>
    </tbody>
  </table>

  <table class="table3">
    <tbody>
      <tr>
        <td class="group3">E.</td>
        <td class="head3">SVG &mdash; SOLID w&#47;BORDER</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB SVGTAB1BDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGTABS2BDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGTABS3BDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS SVGTABS7BDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="group3">F.</td>
        <td class="head3">SVG &mdash; SOLID <i>NO</i> BORDER</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB SVGTAB1</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGTABS2</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGTABS3</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS SVGTABS7</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="group3">G.</td>
        <td class="head3">SVG &mdash; PATTERN w&#47;BORDER</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB SVGTAB1PATTBDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGTABS2PATTBDR</a></span> &mdash; Coming!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGTABS3PATT3BDR</a></span> &mdash; Coming!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS SVGTABS7PATTBDR</a></span> &mdash; Coming!</td>
      </tr>
      <tr>
        <td class="group3">H.</td>
        <td class="head3">SVG &mdash; PATTERN <i>NO</i> BORDER</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB SVGTAB1PATT</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGTABS2PATT</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGTABS3PATT</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS SVGTABS7PATT</a></span> &mdash; Coming Soon!<br>&nbsp;</td>
      </tr>
    </tbody>
  </table>

  <div class="ivory">
    Got Questions? You can PM me at<br>
    <span class="whlink">
      <a href="https://sitepoint.com/community/c/html-css/25">the Sitepoint Forums</a></span><span class="clamwh">!</span>
    <br>
    <br>
  </div>
  <div class="thanks">
    The author would like to thank Paul O&rsquo;Brien of the Sitepoint Forums for EVERYTHING as well as the fine artists at Inkscape Forum for their valuable contribution in rendering
    <div class="hilite">3 very clean masters of the tabs in SVG</div>
    most especially &ldquo;polygon&rdquo; and &ldquo;tyler&rdquo;. You guys are the best! Until we meet again&nbsp;.&nbsp;.&nbsp;.
  </div>

</body>
</html>

Paul I don’t believe this: It’s leaking! On the Group titles all the way to the right. :nono:

Wait a minute I think I can fix this.

FIXED AND VALIDATED (I even caught 2 closing tag omissions of snady’s hee hee). I’ll be in the bar.

<!DOCTYPE html>
<HTML LANG="en">

<HEAD>
  <meta http-equiv="Content-Type" content="text/html; 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=Roboto:wght@100;200;300;400;500;600;700;800;900&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+Condensed: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=Calistoga&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&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=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">

  <title>TABLE OF CONTENTS &#7172; semicodin</title>

  <style>

body {
    width: 1080px;
    background-color: black;
    margin: 0 auto;
    color: black;
    font-family: 'roboto slab', serif;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 2.63rem;
}

#counter {
    text-align: center;
    position: absolute;
    bottom: 0;
    max-width: 100%;
}

.ssz1 {
    margin-top: 3.13rem;
    text-align: center;
    font-family: 'crete round';
    font-size: 2rem;
    line-height: 2.25rem;
    font-weight: bold;
    color: #ebf6ff;
    /* PALE BLUE */
}

.ssz2 {
    text-align: center;
    margin-bottom: 1.75rem;
    font-family: 'crete round';
    font-size: 1.75rem;
    line-height: 2rem;
    font-weight: bold;
    color: #ebf6ff;
    /* PALE BLUE */
}

.henpen {
    text-align: center;
    color: #ffffee;
    /* ivory */
    margin: 2.5rem 16% 0rem 16%;
    font-size: 3.75rem;
    line-height: 3.88;
    font-weight: 700;
    font-family: 'Henny Penny', cursive;
}

.here {
    color: #888888;
    font-family: 'roboto slab', serif;
    font-weight: 400;
    font-size: 2.25rem;
    line-height: 2.31rem;
}

.thanks {
    margin: 2.5rem 15% 6.25rem 15%;
    color: #ffffee;
    /* ivory */
    text-align: center;
    font-style: italic;
    font-family: 'crete round', serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}

.hilite {
    margin: 0rem 3.38rem 0rem 3.38rem;
    text-align: center;
    font-style: italic;
    color: black;
    background-color: white;
    font-family: 'crete round', serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
    padding-top: .5rem;
    padding-right: .8rem;
    padding-bottom: .6rem;
    padding-left: .8rem;
}

td {
    padding-top: .5rem;
    padding-right: .5rem;
    padding-bottom: .6rem;
    padding-left: .8rem;
}

.table2,.table3{
    border-spacing:0;
}
.jot {
    border-right: 3px solid black
}

/* ▬▬▬▬▬▬▬ TABLE 1 ▬▬▬▬▬▬▬ */

.table1 {
    width: 86%;
    margin: 0rem 7% 0rem 7%;
    border: 1.75rem groove #dab471;
    padding: .8rem;
    color: #ffffee; /* ivory */
    text-align: center;
    font-style: italic;
    background-color: black;
    font-family: 'crete round', serif;
    font-size: 4rem;
    line-height: 4.25rem;
    font-weight: bold;
}


.group1 {
    /*   CLASS LETTER (A)  */
    width: 8%;
    color: crimson;
    border-right: 3px solid black;
    font-family: 'calistoga', serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 2.88rem;
}
.head1 {
    width: 92%; /* DESCRIPTION */
    color: crimson;
    font-family: 'calistoga', serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 2.88rem;
}

/* ▬▬▬▬▬▬▬ TABLE 2 ▬▬▬▬▬▬▬ */

.table2 {
    width: 86%;
    margin: 0rem 7% 0rem 7%;
    border-left: 1.75rem groove #dab471;
    border-right: 1.75rem groove #dab471;
    font-family: 'roboto slab', serif;
    font-size: 2.25rem;
    line-height: 2.31rem;
    font-weight: bold;
    color: black;
}
.group2 {
    /*   CLASS LETTER (B-D)  */
    width: 8%;
    color: blue;
    border-right: 3px solid black;
    font-family: 'calistoga', serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 2.88rem;
}

.head2 {
    width: 92%; /* DESCRIPTION */
    color: blue;
    font-family: 'calistoga', serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 2.88rem;
}

.table2 tbody tr:nth-child(odd) {
    background-color: white;
}

.table2 tbody tr:nth-child(even) {
    background-color: #ebf6ff; /* PALE BLUE */
}

/* ▬▬▬▬▬▬▬ TABLE 3 ▬▬▬▬▬▬▬ */

.table3 {
    width: 86%;
    margin: 0rem 7% 1.25rem 7%;
    border-left: 1.75rem groove #dab471;
    border-right: 1.75rem groove #dab471;
    border-bottom: 1.75rem groove #dab471;
    font-family: 'roboto slab', serif;
    font-size: 2.25rem;
    line-height: 2.31rem;
    font-weight: bold;
    color: black;
}

.group3 {
    width: 8%;  /* CLASS LETTER (E-H) */
    color: green;
    border-right: 3px solid black;
    font-family: 'calistoga', serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 2.88rem;
}

.head3 {
    width: 92%;  /* DESCRIPTION */
    color: green;
    font-family: 'calistoga', serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 2.88rem;
}

.table3 tbody tr:nth-child(odd) {
    background-color: white;
}

.table3 tbody tr:nth-child(even) {
    background-color: #f3ffeb; /* PALE GREEN */
}

    /* ━━━━━━━━━━ COLORS ━━━━━━━━━━━ */
    .ivory {
      color: #ffffee;
      text-align: center;
      margin: 2.25rem 0rem 2.25rem 0rem;
    }

    .blu {
      color: blue
    }

    .blub {
      color: blue;
      font-weight: bold;
    }

    .fusch {
      color: #ca009b
    }

    .fuschb {
      color: #ca009b;
      font-weight: bold
    }

    .fuschi {
      color: #ca009b;
      font-style: italic
    }

    .crim {
      color: crimson
    }

    .crimb {
      color: crimson;
      font-weight: bold
    }

    .crimi {
      color: crimson;
      font-style: italic
    }

    .grey {
      color: grey
    }

    .green {
      color: #248900
    }

    /* green */
    .greenb {
      color: #248900;
      font-weight: bold
    }

    /* ━━━━━━━━━ LINKS ━━━━━━━━━━━ */
    a:active {
      color: crimson
    }

    a:hover {
      color: crimson
    }

    a:link {
      color: blue
    }

    a:visited {
      color: blue
    }

    .redlink a:link {
      color: crimson
    }

    .redlink a:visited {
      color: crimson
    }

.pchlink a:link {
    color: #8D4000
}
.pchlink a:visited {
    color: #8D4000
}

    .whlink a:link {
      color: #ffffee
    }

    /* ivory */
    .whlink a:visited {
      color: #ffffee
    }

    /* ivory */
    .bk1link a:link {
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.25rem;
      line-height: 2.31rem;
    }

    .bk1link a:visited {
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.25rem;
      line-height: 2.31rem;
    }

    .bk2link a:link {
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.5rem;
      line-height: 2.63rem;
    }

    .bk2link a:visited {
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.5rem;
      line-height: 2.63rem;
    }

    .bnlink a:link {
      padding-bottom: 10px;
      color: #bbac86;
      /*  BROWN  */
      background: black;
      text-align: center;
      font-style: italic;
      font-family: 'roboto condensed', sans-serif;
      font-size: 1.88rem;
      line-height: 2rem;
      font-weight: 700;
    }

    .bnlink a:visited {
      padding-bottom: 10px;
      color: #bbac86;
      /*  BROWN  */
      background: black;
      text-align: center;
      font-style: italic;
      font-family: 'roboto condensed', sans-serif;
      font-size: 1.88rem;
      line-height: 2rem;
      font-weight: 700;
    }

    /* ━━━━━━ MISCELLANEOUS ━━━━━━━ */
    .lead {
      padding: .8rem;
      width: auto;
      color: black;
      text-align: center;
      font-style: italic;
      font-family: 'crete round', serif;
      font-size: 4rem;
      line-height: 4.25rem;
      font-weight: bold;
    }

    .ctr {
      text-align: center
    }

    .undr {
      text-decoration: underline
    }

    .clamwh {
      color: #ffffee;
      /* IVORY */
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

    .clambu {
      color: #ebf6ff;
      /* PALE BLUE */
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

    .clambk {
      color: black;
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 5rem;
      font-weight: 900;
    }

    .clamcr {
      color: crimson;
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

    .clamye {
      color: yellow;
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

/* ▬▬▬▬▬ START SMOKE TAB ▬▬▬▬ */
            /* ANIMATED  */
    td.svg-header {
      padding: 1rem .5rem 0;
      background: white;
      border-bottom: 7px solid #000;
      border-top: 0px solid #000;
    }

    .svgtabs.onetab span {
      --tab1-color: #fff;
    }

    .svgtabs {
      width: 100%;
      margin: auto;
      display: flex;
      overflow: hidden;
    }

    .svgtabs a {
      color: #000;
      text-decoration: none;
      flex: 1 0 0;
      display: grid;
      align-items: center;
      grid-template-areas: "tab";
      position: relative;
      text-align: center;
      margin-right: -9rem;
      transition: 0.3s ease;
    }

    .svgtabs.onetab a {
      justify-content: center;
      margin-right: 0;
    }

    .svgtabs a:last-child {
      margin-right: 0 !important;
    }

    .svgtabs svg {
      display: block;
      grid-area: tab;
      position: relative;
      z-index: 1;
    }

    .svgtabs.onetab svg {
      width: 620px;
      height: 75px;
      top: 2px
    }

    .svgtabs span {
      grid-area: tab;
      position: relative;
      z-index: 2;
      padding: 11px .5rem 0;
      font-weight: bold;
      color: #000;
      font-style: italic;
      font-family: 'crete round', serif;
      font-size: 4rem;
      line-height: 4.25rem;
    }

    #test {
      height: 220px;
      animation: tab 15s infinite
    }

    @keyframes tab {
      0% {
        height: 200px;
        width: 260px;
      }

      50% {
        height: 140px;
        width: 180px;
      }

      100% {
        height: 200px;
        width: 260px
      }
    }

.new {
      color: yellow;
      background-color: crimson;
      margin-left: 1.5rem;
      font-family: 'crete round', serif;
      font-size: 2rem;
      line-height: 2.25rem;
      font-weight: bold;
      padding-top: .4rem;
      padding-right: .6rem;
      padding-bottom: .4rem;
      padding-left: .6rem;

/* ▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬ */
</style>
</head>

<body>

  <div class="ssz1">
   This Is A Small Screen Zone*</div>
  <div class="ssz2">
    *Designed and built for SmartPhones<span class="clamlbu">!</span></div>

  <table class="table1">
    <tbody>
      <tr>
        <td>
          Table of Contents
        </td>
      </tr>
    </tbody>
  </table>

<table class="table2">
    <tbody>
      <tr>
        <td class="group1">A.</td>
        <td class="head1">PROJECTS</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/index.html" target="_blank">Home</a>
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/about.html" target="_blank">About</a> <span class="new">NEW<span class="clamye">!</span></span>
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          Table of Contents <span class="here">(You Are Here)</span></td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/0_thru_g/(shape-outside_ellipse)_01.html" target="_blank">&lt;shape-outside: ellipse&gt; 01</a>
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">&lt;shape-outside: polygon&gt; 01</a>
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/0_thru_g/2_flex_cols_nth_child_01.html" target="_blank">2_flex_columns_nth_child_01</a>
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">Template Complex Business Letter for 2 Addressees</a> w&#47;Sticker Positions from USPS P.O.D. Counter Rolls
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/0_thru_g/3_col_flex_rem_conversion_chart.html" target="_blank">REM Conversion Chart</a> Flex w&#47;nth Child
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/h_thru_z/vert_center_image_w_text_01.html" target="_blank">Vertically Center an Image</a> &amp; Horizontally Including Text w&#47;Page Counter Footer
        </td>
      </tr>

      <tr>
        <td class="svg-header" colspan="2">
          <div>
            <div class="svgtabs onetab">
              <a class="svgtab1" href="#">
                <span>Tabs!</span>
                <svg viewBox="0 0 164.042 15.843">
                  <clipPath id="shape">
                    <path id="front-fill" d="M121.772 232.987c-11.042 0-13.643 5.879-17.411 10.564-4.653 5.788-11.776 8.51-11.776 8.51h145.426s-7.123-2.722-11.776-8.51c-3.768-4.685-6.37-10.564-17.412-10.564Z" transform="translate(-83.277 -232.217)"/>
                  </clipPath>

                  <path style="fill:#000; stroke-width:4; stroke:#000" d="M121.772 232.217c-5.022 0-8.508 1.208-11.179 3.182-2.67 1.974-4.52 4.54-6.502 7.008-3.962 4.935-8.28 9.653-20.814 9.653h11.356c5.25-1.985 8.309-5.303 10.882-8.509 2.017-2.511 3.785-4.923 6.166-6.683 2.382-1.76 5.38-2.823 10.091-2.823h87.051c4.711 0 7.71 1.062 10.091 2.823 2.382 1.76 4.15 4.172 6.166 6.683 2.574 3.206 5.633 6.524 10.882 8.51h11.357c-12.534 0-16.852-4.72-20.815-9.654-1.98-2.468-3.83-5.034-6.501-7.008-2.671-1.974-6.157-3.182-11.18-3.182Z" transform="translate(-83.277 -232.217)" />

                  <image id="test" width="270" height="220" href="https://assets.codepen.io/74047/PARCHMENT-A.jpg" clip-path="url(#shape)" />
                </svg>
              </a>
            </div>
          </div>
        </td>
      </tr>

      <tr>
        <td class="group2">B.</td>
        <td class="head2">CSS & SVG &#9753; PARCHMENT & SMOKE</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB CSSPAR1</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
          <a href="https://semicodin.nekoweb.org/h_thru_z/svgpar1_ani.html" target="_blank">1 TAB SVGPAR1_ANI</a></span> &#47; ANIMATED <span class="new">NEW<span class="clamye">!</span></span>
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS CSSPAR2</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGPAR2_ANI</a></span> &#47; ANIMATED &mdash; Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS CSSPAR3</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGPAR3_ANI</a></span> &#47; ANIMATED Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS CSSPAR7</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="group2">C.</td>
        <td class="head2">CSS &mdash; SOLID w&#47;BORDER</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB CSSTAB1BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS CSSTABS2BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS CSSTABS3BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS CSSTABS7BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="group2">D.</td>
        <td class="head2">CSS &mdash; SOLID <i>NO</i> BORDER</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB CSSTAB1</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS CSSTABS2</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS CSSTABS3</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td>
          <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS CSSTABS7</a> &mdash; Coming Soon!
        </td>
      </tr>
    </tbody>
  </table>

  <table class="table3">
    <tbody>
      <tr>
        <td class="group3">E.</td>
        <td class="head3">SVG &mdash; SOLID w&#47;BORDER</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB SVGTAB1BDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGTABS2BDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGTABS3BDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS SVGTABS7BDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="group3">F.</td>
        <td class="head3">SVG &mdash; SOLID <i>NO</i> BORDER</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB SVGTAB1</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGTABS2</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGTABS3</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS SVGTABS7</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="group3">G.</td>
        <td class="head3">SVG &mdash; PATTERN w&#47;BORDER</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB SVGTAB1PATTBDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGTABS2PATTBDR</a></span> &mdash; Coming!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGTABS3PATT3BDR</a></span> &mdash; Coming!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS SVGTABS7PATTBDR</a></span> &mdash; Coming!</td>
      </tr>
      <tr>
        <td class="group3">H.</td>
        <td class="head3">SVG &mdash; PATTERN <i>NO</i> BORDER</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">1 TAB SVGTAB1PATT</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">2 TABS SVGTABS2PATT</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">3 TABS SVGTABS3PATT</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="jot"></td>
        <td><span class="bk1link">
            <a href="https://semicodin.nekoweb.org/comingsoon.html" target="_blank">7 TABS SVGTABS7PATT</a></span> &mdash; Coming Soon!<br>&nbsp;</td>
      </tr>
    </tbody>
  </table>

  <div class="ivory">
    Got Questions? You can PM me at<br>
    <span class="whlink">
      <a href="https://sitepoint.com/community/c/html-css/25">the Sitepoint Forums</a></span><span class="clamwh">!</span>
    <br>
    <br>
  </div>
  <div class="thanks">
    The author would like to thank Paul O&rsquo;Brien of the Sitepoint Forums for EVERYTHING as well as the fine artists at Inkscape Forum for their valuable contribution in rendering
    <div class="hilite">3 very clean masters of the tabs in SVG</div>
    most especially &ldquo;polygon&rdquo; and &ldquo;tyler&rdquo;. You guys are the best! Until we meet again&nbsp;.&nbsp;.&nbsp;.
  </div>

<div id="counter">
<!-- Histats.com  (div with counter) --><div id="histats_counter"></div>
<!-- Histats.com  START  (aync)-->
<script type="text/javascript">var _Hasync= _Hasync|| [];
_Hasync.push(['Histats.start', '1,4873214,4,430,112,75,00011111']);
_Hasync.push(['Histats.fasi', '1']);
_Hasync.push(['Histats.track_hits', '']);
(function() {
var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
hs.src = ('//s10.histats.com/js15_as.js');
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
})();</script>
<noscript><a href="/" target="_blank"><img  src="//sstatic1.histats.com/0.gif?4873214&101" alt="stats online users" border="0"></a></noscript>
<!-- Histats.com  END  -->
</div>

</body>
</html>

The tag ommisions appear to have been there prior to my
working on the code which I copied from this post of yours…
.
https://www.sitepoint.com/community/t/creating-scaleable-svg-file-folder-tabs/445947/157

I made two changes …
First

<svg width="620" height="74.998" viewBox="0 0 164.042 19.843" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">

was changed to this…

<svg viewBox="0 0 164.042 15.843">

Second

<path style="fill:#000;stroke-width:.264999;stroke-linejoin:bevel;paint-order:fill markers stroke" 

was changed to this…

<path style="fill:#000; stroke-width:4; stroke:#000"

As these were my only amendments I saw no reason to
validate your existing code as I simply presumed that you
would not have posted invalid code for members to work on. :rofl:

3 Likes

We love you snady. Your work is EXQUISITE. Might I interest you in just two more? :eyebrows:

There was and I hoped you would find it yourself as I alluded to it several times :). Its in most of your demos.

    .table1 tbody tr td:nth-of-type(1) {
      border-right: .19rem solid #000;
    }

In your latest version you could have just used this without any classes needed.:wink:


.table2 tr td:first-child,
.table3 tr td:first-child{
 border-right:3px solid #000;
}
1 Like

There was and I hoped you would find it yourself as I alluded to it several times :). Its in most of your demos.

    .table1 tbody **tr td**:nth-of-type(1) {
      border-right: .19rem solid #000;
    }

In your latest version you could have just used this without any classes needed.:wink:


.table2 **tr td**:first-child,
.table3 tr td:first-child{
 border-right:3px solid #000;
}

[/quote]

I was right! I was trying table2 td I missed the tr. At a glacial pace, little by little . . . Thank you Paul, I’m going to rewrite my code and place this little beauty in my toolbox. :weee:
Can I ask is there no space between the

right:3px

deliberately?

There doesn’t have to be a space after the colon. It’s not needed but you can add it for formatting if you want.

1 Like