Html Guide

HTML-tabeller enkelt gjort: En komplett guide till datatabeller

Lär dig HTML-tabeller från grunder till avancerade tekniker. Bemästra table-, tr-, td-, th-element, tillgänglighet, responsiv design och när tabeller ska användas korrekt.

September 4, 2025

8 min läsning

HTML

tabeller

datatabeller

tillgänglighet

responsiv design

tabellelement

När tabeller ska användas (och när de inte ska användas)

Att förstå när tabeller ska användas är avgörande för att skapa semantiska, tillgängliga webbplatser.

✅ När tabeller ska användas

Perfekt för tabelldata:

Finansiella rapporter och kalkylblad
Jämförelsediagram och funktionsmatriser
Sportstatistik och resultattavlor
Scheman och tidtabeller
Produktspecifikationer
Undersökningsresultat och dataanalys

Exempel på lämplig tabellanvändning:

<!-- Bra: Visa strukturerad data -->
<table>
  <caption>Kvartalsrapport försäljning 2024</caption>
  <thead>
    <tr>
      <th>Kvartal</th>
      <th>Intäkter</th>
      <th>Tillväxt</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>1 250 000 kr</td>
      <td>+15%</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>1 437 500 kr</td>
      <td>+18%</td>
    </tr>
  </tbody>
</table>

❌ När tabeller INTE ska användas

Undvik tabeller för:

Sidlayout och positionering
Skapa kolumner för textinnehåll
Endast stylingändamål
Icke-tabellinnehållsorganisation

Exempel på olämplig tabellanvändning:

<!-- Fel: Använda tabell för layout -->
<table>
  <tr>
    <td>
      <nav>Navigation här</nav>
    </td>
    <td>
      <main>Huvudinnehåll här</main>
    </td>
    <td>
      <aside>Sidopanel här</aside>
    </td>
  </tr>
</table>

<!-- Korrekt: Använd CSS Grid eller Flexbox -->
<div class="layout">
  <nav>Navigation här</nav>
  <main>Huvudinnehåll här</main>
  <aside>Sidopanel här</aside>
</div>

`<table>`, `<tr>`, `<td>`, `<th>` grunder

Att förstå de grundläggande tabellelementen är avgörande för att skapa välstrukturerade tabeller.

Grundläggande tabellstruktur

<table>
  <tr>
    <th>Rubrik 1</th>
    <th>Rubrik 2</th>
    <th>Rubrik 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
</table>

Viktiga tabellelement

<table> - Behållarelement för hela tabellen <tr> - Tabellradelement <th> - Tabellrubrikcell (automatiskt fet och centrerad) <td> - Tabelldatacell

Komplett tabellexempel

<table>
  <tr>
    <th>Produkt</th>
    <th>Pris</th>
    <th>Lager</th>
    <th>Betyg</th>
  </tr>
  <tr>
    <td>Laptop Pro</td>
    <td>12 990 kr</td>
    <td>15</td>
    <td>4,8/5</td>
  </tr>
  <tr>
    <td>Trådlös mus</td>
    <td>290 kr</td>
    <td>87</td>
    <td>4,5/5</td>
  </tr>
  <tr>
    <td>USB-C Hub</td>
    <td>790 kr</td>
    <td>23</td>
    <td>4,2/5</td>
  </tr>
</table>

Tabellrubrikattribut

Scope-attribut:

<table>
  <tr>
    <th scope="col">Namn</th>
    <th scope="col">Ålder</th>
    <th scope="col">Stad</th>
  </tr>
  <tr>
    <th scope="row">John Doe</th>
    <td>28</td>
    <td>Stockholm</td>
  </tr>
  <tr>
    <th scope="row">Jane Smith</th>
    <td>34</td>
    <td>Göteborg</td>
  </tr>
</table>

Lägga till bildtexter och sammanfattningar

Bildtexter och sammanfattningar förbättrar tabelltillgänglighet och ger sammanhang för användare.

Tabellbildtext

<caption>-elementet ger en titel eller beskrivning för tabellen:

<table>
  <caption>Medarbetarprestandamått - Q3 2024</caption>
  <tr>
    <th>Medarbetare</th>
    <th>Försäljning</th>
    <th>Kundbetyg</th>
    <th>Mål uppnådda</th>
  </tr>
  <tr>
    <td>Sarah Johansson</td>
    <td>450 000 kr</td>
    <td>4,9/5</td>
    <td>105%</td>
  </tr>
  <tr>
    <td>Mike Chen</td>
    <td>385 000 kr</td>
    <td>4,7/5</td>
    <td>98%</td>
  </tr>
</table>

Styla bildtexter

caption {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: left;
  color: #333;
}

/* Bildtextpositionering */
caption {
  caption-side: top; /* Standard */
  /* caption-side: bottom; */
}

Summary-attribut (föråldrat)

Obs: summary-attributet är föråldrat i HTML5. Använd <caption> eller omgivande text istället:

<!-- Gammalt sätt (föråldrat) -->
<table summary="Denna tabell visar kvartalsförsäljningsdata">

<!-- Nytt sätt -->
<table>
  <caption>
    Kvartalsförsäljningsdata
    <p>Denna tabell visar intäktssiffror och tillväxtprocent för varje kvartal 2024</p>
  </caption>
  <!-- tabellinnehåll -->
</table>

Slå samman celler med colspan och rowspan

Cellsammanslagning låter dig skapa mer komplexa tabelllayouter genom att spänna celler över flera kolumner eller rader.

Colspan - spänna över kolumner

<table>
  <tr>
    <th colspan="3">Försäljningsrapport 2024</th>
  </tr>
  <tr>
    <th>Kvartal</th>
    <th>Intäkter</th>
    <th>Tillväxt</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>1 000 000 kr</td>
    <td>+10%</td>
  </tr>
  <tr>
    <td>Q2</td>
    <td>1 200 000 kr</td>
    <td>+20%</td>
  </tr>
  <tr>
    <td colspan="2">Totala intäkter</td>
    <td>2 200 000 kr</td>
  </tr>
</table>

Rowspan - spänna över rader

<table>
  <tr>
    <th>Avdelning</th>
    <th>Medarbetare</th>
    <th>Roll</th>
    <th>Lön</th>
  </tr>
  <tr>
    <td rowspan="3">Teknik</td>
    <td>John Smith</td>
    <td>Senior utvecklare</td>
    <td>950 000 kr</td>
  </tr>
  <tr>
    <td>Sarah Wilson</td>
    <td>Frontend-utvecklare</td>
    <td>750 000 kr</td>
  </tr>
  <tr>
    <td>Mike Johnson</td>
    <td>DevOps-ingenjör</td>
    <td>850 000 kr</td>
  </tr>
  <tr>
    <td rowspan="2">Marknadsföring</td>
    <td>Lisa Brown</td>
    <td>Marknadsföringschef</td>
    <td>700 000 kr</td>
  </tr>
  <tr>
    <td>Tom Davis</td>
    <td>Innehållsskapare</td>
    <td>550 000 kr</td>
  </tr>
</table>

Komplex cellsammanslagning

<table>
  <tr>
    <th colspan="4">Företagsprestandapanel</th>
  </tr>
  <tr>
    <th rowspan="2">Mått</th>
    <th colspan="3">Kvartal</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td>Intäkter</td>
    <td>1 500 000 kr</td>
    <td>1 750 000 kr</td>
    <td>2 000 000 kr</td>
  </tr>
  <tr>
    <td>Vinst</td>
    <td>450 000 kr</td>
    <td>520 000 kr</td>
    <td>650 000 kr</td>
  </tr>
</table>

Avancerad tabellstruktur

För komplexa tabeller, använd semantiska element för att förbättra struktur och tillgänglighet.

Tabellsektioner: `<thead>`, `<tbody>`, `<tfoot>`

<table>
  <caption>Årlig finansiell sammanfattning</caption>
  
  <thead>
    <tr>
      <th scope="col">Kategori</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
      <th scope="col">Q3</th>
      <th scope="col">Q4</th>
      <th scope="col">Totalt</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <th scope="row">Intäkter</th>
      <td>1 250 000 kr</td>
      <td>1 437 500 kr</td>
      <td>1 653 125 kr</td>
      <td>1 901 094 kr</td>
      <td>6 241 719 kr</td>
    </tr>
    <tr>
      <th scope="row">Utgifter</th>
      <td>875 000 kr</td>
      <td>1 006 250 kr</td>
      <td>1 157 188 kr</td>
      <td>1 330 766 kr</td>
      <td>4 369 204 kr</td>
    </tr>
    <tr>
      <th scope="row">Vinst</th>
      <td>375 000 kr</td>
      <td>431 250 kr</td>
      <td>495 937 kr</td>
      <td>570 328 kr</td>
      <td>1 872 515 kr</td>
    </tr>
  </tbody>
  
  <tfoot>
    <tr>
      <th scope="row">Vinstmarginal</th>
      <td>30%</td>
      <td>30%</td>
      <td>30%</td>
      <td>30%</td>
      <td>30%</td>
    </tr>
  </tfoot>
</table>

Kolumngrupper: `<colgroup>` och `<col>`

<table>
  <caption>Produktjämförelse</caption>
  
  <colgroup>
    <col>
    <col span="2" class="price-columns">
    <col class="rating-column">
  </colgroup>
  
  <thead>
    <tr>
      <th>Produkt</th>
      <th>Ordinarie pris</th>
      <th>Reapris</th>
      <th>Betyg</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>9 990 kr</td>
      <td>7 990 kr</td>
      <td>4,5/5</td>
    </tr>
    <tr>
      <td>Surfplatta</td>
      <td>5 990 kr</td>
      <td>4 990 kr</td>
      <td>4,2/5</td>
    </tr>
  </tbody>
</table>

.price-columns {
  background-color: #f0f8ff;
}

.rating-column {
  background-color: #fff8dc;
  text-align: center;
}

Tillgänglighet i tabeller

Att göra tabeller tillgängliga säkerställer att alla användare kan förstå och navigera din data effektivt.

Viktiga tillgänglighetsfunktioner

1. Använd tabellrubriker korrekt:

<table>
  <tr>
    <th scope="col">Namn</th>
    <th scope="col">Avdelning</th>
    <th scope="col">Lön</th>
  </tr>
  <tr>
    <th scope="row">John Doe</th>
    <td>Teknik</td>
    <td>750 000 kr</td>
  </tr>
</table>

2. Tillhandahåll tydliga bildtexter:

<table>
  <caption>
    Medarbetarlöninformation
    <span class="sr-only">
      Denna tabell innehåller medarbetarnamn, avdelningar och löninformation
    </span>
  </caption>
  <!-- tabellinnehåll -->
</table>

3. Använd ARIA-etiketter vid behov:

<table aria-label="Månadsbudgetuppdelning">
  <tr>
    <th id="category">Kategori</th>
    <th id="budgeted">Budgeterat</th>
    <th id="actual">Faktiskt</th>
    <th id="difference">Skillnad</th>
  </tr>
  <tr>
    <td headers="category">Boende</td>
    <td headers="budgeted">12 000 kr</td>
    <td headers="actual">11 500 kr</td>
    <td headers="difference">-500 kr</td>
  </tr>
</table>

Komplex tabelltillgänglighet

För tabeller med flera rubriknivåer:

<table>
  <caption>Försäljningsdata per region och kvartal</caption>
  <thead>
    <tr>
      <th rowspan="2" id="region">Region</th>
      <th colspan="4" id="quarters">2024 kvartal</th>
    </tr>
    <tr>
      <th id="q1" headers="quarters">Q1</th>
      <th id="q2" headers="quarters">Q2</th>
      <th id="q3" headers="quarters">Q3</th>
      <th id="q4" headers="quarters">Q4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="north" headers="region">Norr</th>
      <td headers="north q1">1 250 000 kr</td>
      <td headers="north q2">1 430 000 kr</td>
      <td headers="north q3">1 650 000 kr</td>
      <td headers="north q4">1 900 000 kr</td>
    </tr>
    <tr>
      <th id="south" headers="region">Söder</th>
      <td headers="south q1">980 000 kr</td>
      <td headers="south q2">1 120 000 kr</td>
      <td headers="south q3">1 280 000 kr</td>
      <td headers="south q4">1 450 000 kr</td>
    </tr>
  </tbody>
</table>

Skärmläsaröverväganden

/* Endast skärmläsartext */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hoppa över tabellnavigation */
.skip-table {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-table:focus {
  position: static;
  width: auto;
  height: auto;
}

Styla tabeller med CSS

Förvandla grundläggande HTML-tabeller till visuellt tilltalande, professionella datavisningar.

Grundläggande tabellstyling

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #333;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.5px;
}

tr:hover {
  background-color: #f5f5f5;
}

/* Alternerande radfärger */
tr:nth-child(even) {
  background-color: #f9f9f9;
}

Modern tabelldesign

.modern-table {
  width: 100%;
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.9em;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  min-width: 400px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.modern-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
}

.modern-table th,
.modern-table td {
  padding: 12px 15px;
}

.modern-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.modern-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.modern-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

.modern-table tbody tr:hover {
  background-color: #f1f1f1;
  transform: scale(1.02);
  transition: all 0.3s ease;
}

Responsiv tabelldesign

.responsive-table {
  width: 100%;
  border-collapse: collapse;
}

@media screen and (max-width: 768px) {
  .responsive-table {
    border: 0;
  }

  .responsive-table caption {
    font-size: 1.3em;
  }
  
  .responsive-table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  .responsive-table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: 10px;
  }
  
  .responsive-table td {
    border: none;
    border-bottom: 1px solid #eee;
    display: block;
    font-size: 0.8em;
    text-align: right;
    padding-left: 50%;
    position: relative;
  }
  
  .responsive-table td:before {
    content: attr(data-label);
    position: absolute;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: bold;
    text-align: left;
  }
}

<table class="responsive-table">
  <thead>
    <tr>
      <th>Namn</th>
      <th>Position</th>
      <th>Kontor</th>
      <th>Lön</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Namn">John Doe</td>
      <td data-label="Position">Utvecklare</td>
      <td data-label="Kontor">Stockholm</td>
      <td data-label="Lön">750 000 kr</td>
    </tr>
  </tbody>
</table>

Tabell med åtgärdsknappar

.action-table {
  width: 100%;
  border-collapse: collapse;
}

.action-table th,
.action-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8em;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s;
}

.btn-edit {
  background-color: #007bff;
  color: white;
}

.btn-edit:hover {
  background-color: #0056b3;
}

.btn-delete {
  background-color: #dc3545;
  color: white;
}

.btn-delete:hover {
  background-color: #c82333;
}

<table class="action-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Namn</th>
      <th>E-post</th>
      <th>Åtgärder</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td>
        <div class="action-buttons">
          <a href="#" class="btn btn-edit">Redigera</a>
          <button class="btn btn-delete">Ta bort</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Vanliga tabellmisstag att undvika

1. Använda tabeller för layout

<!-- Fel: Tabell för sidlayout -->
<table>
  <tr>
    <td>Rubrik</td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td>Sidopanel</td>
          <td>Innehåll</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<!-- Korrekt: CSS Grid för layout -->
<div class="page-layout">
  <header>Rubrik</header>
  <aside>Sidopanel</aside>
  <main>Innehåll</main>
</div>

2. Saknade tabellrubriker

<!-- Fel: Inga rubriker -->
<table>
  <tr>
    <td>Namn</td>
    <td>Ålder</td>
    <td>Stad</td>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>Stockholm</td>
  </tr>
</table>

<!-- Korrekt: Korrekta rubriker -->
<table>
  <tr>
    <th>Namn</th>
    <th>Ålder</th>
    <th>Stad</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>Stockholm</td>
  </tr>
</table>

3. Inkonsekvent cellstruktur

<!-- Fel: Inkonsekventa kolumner -->
<table>
  <tr>
    <th>Namn</th>
    <th>Ålder</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>Extra cell</td> <!-- Detta bryter strukturen -->
  </tr>
</table>

<!-- Korrekt: Konsekvent struktur -->
<table>
  <tr>
    <th>Namn</th>
    <th>Ålder</th>
    <th>Anteckningar</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>Ny medarbetare</td>
  </tr>
</table>

4. Dålig mobilupplevelse

<!-- Fel: Ingen mobilhänsyn -->
<table style="width: 1200px;">
  <!-- Mycket bred tabell med många kolumner -->
</table>

<!-- Korrekt: Responsivt tillvägagångssätt -->
<div class="table-container">
  <table class="responsive-table">
    <!-- Tabell med mobilvänlig design -->
  </table>
</div>

Avancerade tabelltekniker

Sorterbara tabeller

<table class="sortable-table">
  <thead>
    <tr>
      <th data-sort="string">Namn <span class="sort-arrow">↕</span></th>
      <th data-sort="number">Ålder <span class="sort-arrow">↕</span></th>
      <th data-sort="number">Lön <span class="sort-arrow">↕</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>28</td>
      <td>750000</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>34</td>
      <td>850000</td>
    </tr>
  </tbody>
</table>

Filterbara tabeller

<div class="table-controls">
  <input type="text" id="table-filter" placeholder="Filtrera tabell...">
</div>

<table class="filterable-table">
  <thead>
    <tr>
      <th>Produkt</th>
      <th>Kategori</th>
      <th>Pris</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>Elektronik</td>
      <td>9 990 kr</td>
    </tr>
    <tr>
      <td>Skrivbordsstol</td>
      <td>Möbler</td>
      <td>2 990 kr</td>
    </tr>
  </tbody>
</table>

Expanderbara rader

<table class="expandable-table">
  <thead>
    <tr>
      <th></th>
      <th>Order-ID</th>
      <th>Kund</th>
      <th>Totalt</th>
    </tr>
  </thead>
  <tbody>
    <tr class="expandable-row">
      <td><button class="expand-btn">+</button></td>

Relaterade Artiklar

Fortsätt läsa med dessa relaterade artiklar

Html

Arbeta med bilder i HTML: En komplett guide till <img>-taggen

Bemästra HTML-bilder med denna omfattande guide som täcker img-taggen, alt-text, filformat, responsiva bilder, srcset och webbprestandaoptimering.

Listor i HTML: Ordnade, oordnade och definitionslistor förklarade

Bemästra HTML-listor med denna kompletta guide som täcker ul-, ol- och dl-element, nästlingstekniker, CSS-styling och bästa praxis för tillgänglighet.

Formulär i HTML: En nybörjarguide till interaktiva webbformulär

Lär dig skapa HTML-formulär från grunden med denna omfattande guide som täcker form-elementet, inputtyper, etiketter, tillgänglighet och validering.

Semantisk HTML: Varför det spelar roll för SEO och tillgänglighet

Upptäck kraften i semantisk HTML med denna omfattande guide som täcker header, footer, article, section och varför semantisk kod förbättrar SEO och tillgänglighet.

September 4, 2025

11 min läsning

Läs Artikel →

HTML-tabeller enkelt gjort: En komplett guide till datatabeller

När tabeller ska användas (och när de inte ska användas)

✅ När tabeller ska användas

❌ När tabeller INTE ska användas

<table>, <tr>, <td>, <th> grunder

Grundläggande tabellstruktur

Viktiga tabellelement

Komplett tabellexempel

Tabellrubrikattribut

Lägga till bildtexter och sammanfattningar

Tabellbildtext

Styla bildtexter

Summary-attribut (föråldrat)

Slå samman celler med colspan och rowspan

Colspan - spänna över kolumner

Rowspan - spänna över rader

Komplex cellsammanslagning

Avancerad tabellstruktur

Tabellsektioner: <thead>, <tbody>, <tfoot>

Kolumngrupper: <colgroup> och <col>

Tillgänglighet i tabeller

Viktiga tillgänglighetsfunktioner

Komplex tabelltillgänglighet

Skärmläsaröverväganden

Styla tabeller med CSS

Grundläggande tabellstyling

Modern tabelldesign

Responsiv tabelldesign

Tabell med åtgärdsknappar

Vanliga tabellmisstag att undvika

1. Använda tabeller för layout

2. Saknade tabellrubriker

3. Inkonsekvent cellstruktur

4. Dålig mobilupplevelse

Avancerade tabelltekniker

Sorterbara tabeller

Filterbara tabeller

Expanderbara rader

Relaterade Artiklar

Arbeta med bilder i HTML: En komplett guide till <img>-taggen

Listor i HTML: Ordnade, oordnade och definitionslistor förklarade

Formulär i HTML: En nybörjarguide till interaktiva webbformulär

Semantisk HTML: Varför det spelar roll för SEO och tillgänglighet

`<table>`, `<tr>`, `<td>`, `<th>` grunder

Tabellsektioner: `<thead>`, `<tbody>`, `<tfoot>`

Kolumngrupper: `<colgroup>` och `<col>`