Learn HTML and CSS: Tables

Tables

"Where are our opening hours?" asks Hilary. Somewhere in the third paragraph, between the phone number and the bank details for donations. A table lines them up at a glance.

Rows and cells

You know tables from Excel, or as the result of an SQL query: rows and columns. In HTML you build them row by row.

<table> is the whole table. Each row is a <tr>, short for "table row". Each cell in that row is a <td>, short for "table data".

You don't type columns: the first <td> of every row together make the first column, the second ones the second column.

In the tree you'll also see a <tbody> you never typed. The browser puts that around your rows itself.

index.html

1<main>2  <h2>Opening hours</h2>3  <table>4    <tr>5      <td>Wednesday</td>6      <td>1 pm to 5 pm</td>7    </tr>8    <tr>9      <td>Saturday</td>10      <td>10 am to 4 pm</td>11    </tr>12  </table>13</main>

asiel.example

Headings in a table

The top row says what's in each column, just like the column names above an SQL result or the first row of an Excel sheet. You make those cells with <th>, short for "table header", instead of <td>.

A <th> is bold by default, and here the shelter's CSS gives it a background. More importantly: a screen reader reads out the heading with every cell, like "Age: 8 years". Without headings the listener only hears loose words.

index.html

1<main>2  <h2>Looking for a home</h2>3  <table>4    <tr>5      <th>Name</th>6      <th>Species</th>7      <th>Age</th>8    </tr>9    <tr>10      <td>Rex</td>11      <td>dog</td>12      <td>8 years</td>13    </tr>14    <tr>15      <td>Misty</td>16      <td>cat</td>17      <td>2 years</td>18    </tr>19  </table>20</main>

asiel.example

Try it yourself

Put the opening hours in a table with the headings Day and Hours, and under them Wednesday with 1 pm to 5 pm and Saturday with 10 am to 4 pm.

1<main>2  <h2>Opening hours</h2>3</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fffaf3;5  color: #3d2b1f;6}7header {8  padding: 20px 16px 14px;9  background: #f6c88f;10}11header h1 {12  margin: 4px 0 0;13}14.slogan {15  margin: 4px 0 10px;16}17nav ul {18  display: flex;19  flex-wrap: wrap;20  gap: 4px 18px;21  margin: 0;22  padding: 0;23  list-style: none;24}25nav a {26  color: #7a3e12;27  font-weight: bold;28}29main {30  padding: 8px 16px 24px;31}32table {33  border-collapse: collapse;34}35th,36td {37  padding: 6px 12px;38  border: 1px solid #e3c9a8;39  text-align: left;40}41th {42  background: #fbe3c4;43}44.card {45  margin: 12px 0;46  padding: 12px 16px;47  border-radius: 16px;48  background: #ffffff;49}50.card h3 {51  margin: 4px 0;52}53.box {54  padding: 4px 16px;55  border-radius: 16px;56  background: #fde9d4;57}58.breed {59  color: #b5541c;60}61.closed {62  color: #b42318;63  font-weight: bold;64}65footer {66  padding: 12px 16px;67  background: #f6c88f;68}

asiel.example

Ready for more?

The full lesson has 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

Rows and cells

You know tables from Excel, or as the result of an SQL query: rows and columns. In HTML you build them row by row.

<table> is the whole table. Each row is a <tr>, short for "table row". Each cell in that row is a <td>, short for "table data".

You don't type columns: the first <td> of every row together make the first column, the second ones the second column.

In the tree you'll also see a <tbody> you never typed. The browser puts that around your rows itself.

index.html

1<main>2  <h2>Opening hours</h2>3  <table>4    <tr>5      <td>Wednesday</td>6      <td>1 pm to 5 pm</td>7    </tr>8    <tr>9      <td>Saturday</td>10      <td>10 am to 4 pm</td>11    </tr>12  </table>13</main>

asiel.example

Headings in a table

index.html

1<main>2  <h2>Looking for a home</h2>3  <table>4    <tr>5      <th>Name</th>6      <th>Species</th>7      <th>Age</th>8    </tr>9    <tr>10      <td>Rex</td>11      <td>dog</td>12      <td>8 years</td>13    </tr>14    <tr>15      <td>Misty</td>16      <td>cat</td>17      <td>2 years</td>18    </tr>19  </table>20</main>

asiel.example

Try it yourself

Put the opening hours in a table with the headings Day and Hours, and under them Wednesday with 1 pm to 5 pm and Saturday with 10 am to 4 pm.

1<main>2  <h2>Opening hours</h2>3</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fffaf3;5  color: #3d2b1f;6}7header {8  padding: 20px 16px 14px;9  background: #f6c88f;10}11header h1 {12  margin: 4px 0 0;13}14.slogan {15  margin: 4px 0 10px;16}17nav ul {18  display: flex;19  flex-wrap: wrap;20  gap: 4px 18px;21  margin: 0;22  padding: 0;23  list-style: none;24}25nav a {26  color: #7a3e12;27  font-weight: bold;28}29main {30  padding: 8px 16px 24px;31}32table {33  border-collapse: collapse;34}35th,36td {37  padding: 6px 12px;38  border: 1px solid #e3c9a8;39  text-align: left;40}41th {42  background: #fbe3c4;43}44.card {45  margin: 12px 0;46  padding: 12px 16px;47  border-radius: 16px;48  background: #ffffff;49}50.card h3 {51  margin: 4px 0;52}53.box {54  padding: 4px 16px;55  border-radius: 16px;56  background: #fde9d4;57}58.breed {59  color: #b5541c;60}61.closed {62  color: #b42318;63  font-weight: bold;64}65footer {66  padding: 12px 16px;67  background: #f6c88f;68}

asiel.example