Website Tables

💡 The Concept

How Developers Use Tables

HTML tables are the right tool for displaying structured data in rows and columns. The main thing to keep in mind is that a table should be short and narrow. Tables are not responsive, so a table with many columns does not adapt well to a phone screen. With over half of web traffic coming from mobile devices, a wide table quickly becomes too big to read comfortably. Stick to a few columns and only the data you really need, and your table will look good on any screen.

Small tables that fit within a narrow viewport can be used anywhere. Tables are also perfectly appropriate for desktop or tablet applications, such as internal reporting tools where you know every user is on a larger screen.

The Four Table Elements

A table organizes content into rows and columns. To build one, you need four elements:

• <table>: wraps the entire table
• <tr>: defines a row
• <th>: a header cell (bold by default)
• <td>: a regular data cell

These four are all you need to build a working table. HTML does include other table elements, such as <thead>, <tbody>, <tfoot>, and <caption>, that add extra structure for larger or more complex tables. We are sticking to the core four here to keep things simple, and they will handle almost everything you build.

Here is the code for that table:

<table>
   <tr>
      <th>Instruments</th>
      <th>Range</th>
      <th>Relative</th>
   </tr>
   <tr>
      <td>Piccolo</td>
      <td>High</td>
      <td>Flute</td>
   </tr>
   <tr>
      <td>Bassoon</td>
      <td>Low</td>
      <td>Oboe</td>
   </tr>
</table>

The <table> tags wrap the whole thing. Each <tr> is one row. Inside each row, <th> creates a header cell and <td> creates a regular cell.

CSS for Tables

Without any CSS, a table has no visible borders between cells:

Add a border to both <th> and <td> to draw lines around every cell:

th, td {
   border: 1px solid #000000;
}

This gives you borders, but they appear doubled between adjacent cells. Fix that with border-collapse: collapse on the table itself. Add some padding while you are at it so the text is not pressed against the edges:

table {
   border-collapse: collapse;
}

th, td {
   border: 1px solid #000000;
   padding: 10px;
}

From here you can style tables further: add a background color to the header row with th { background-color: #333; color: white; }, alternate row colors with tr:nth-child(even), or adjust the width of individual columns.

🎬 The Video

This video demonstrates how to build and style an HTML table.

Exercise: Try It Yourself

Now build the table yourself. Start with the plain text below and add the HTML tags and the CSS to turn it into a styled, two-column table.

Step 1. Open JSFiddle.

Step 2. In the HTML panel, add an <h2> for the title, then build the table with <table>, <tr>, <th> for the header row, and <td> for each cell. Use the data below, but do not include the | marks in your HTML. They only show where one cell ends and the next begins.

Use this data. The first line is your heading and the next line is the header row. Each line after that is one row, and the | marks where one cell ends and the next begins.

Minneapolis Lake Beaches

Lake | Beach Address
Bde Maka Ska (Thomas Beach) | 3700 Thomas Ave S, Minneapolis, MN 55416
Bde Maka Ska (North Beach) | W Lake St and Bde Maka Ska Pkwy, Minneapolis, MN 55408
Lake Harriet | 43rd St W and E Lake Harriet Blvd, Minneapolis, MN 55409
Lake Hiawatha | 2701 E 44th St, Minneapolis, MN 55406
Lake Nokomis | 2401 E Minnehaha Pkwy, Minneapolis, MN 55417

Step 3. In the CSS panel, add border-collapse: collapse on the table. Then give td, th a border and some padding. Remember that a border takes three values: width, style, and color, for example border: 1px solid #bbbbbb;. Padding can be something like padding: 8px;.

Step 4. Give the header row a background color and white text using a th rule. Use background-color for the row color and color: white; for the text, for example background-color: #003388;.

Step 5. Resize the result panel to confirm the two-column table still reads well on a narrow screen.

❓ Frequently Asked Questions

★ Key Takeaways

Tables are the right tool for data that has rows and columns. This lesson covered how to create a table using the table, tr, th, and td tags. Next, you will learn about HTML forms, which let users type and submit information on a web page. Forms are used for everything from logins to contact pages and search bars.

← Back to Special Topics Lessons

← Back to All Lessons