Skip to main content

Creating Tables in HTML (Live Playground)

Introduction​

Tables are a useful way to present structured data on a web page, such as tabular data or comparison charts. In this tutorial, you will learn how to create and style tables in HTML using table elements like <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td>. You will also learn about table accessibility and responsiveness.

Creating a Basic Table​

To create a table in HTML, start with the <table> element. Inside the table element, use the <tr> (table row) element to define each row. Within each row, use the <td> (table data) element to define individual cells. Here's an example of a basic table with three rows and three columns:

HTML
<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
    <td>Row 1, Cell 3</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
    <td>Row 2, Cell 3</td>
  </tr>
  <tr>
    <td>Row 3, Cell 1</td>
    <td>Row 3, Cell 2</td>
    <td>Row 3, Cell 3</td>
  </tr>
</table>
Live Playground, Try it Yourself

Table Headings​

To add table headings, use the <th> (table header) element instead of <td>. Table headings are typically placed in the first row of the table, and browsers usually display them in bold and centered text.

HTML
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <!-- Add table rows and data cells here -->
</table>
Live Playground, Try it Yourself

Table Sections​

You can use the <thead>, <tbody>, and <tfoot> elements to divide your table into sections. This helps improve the readability and accessibility of your table, especially for large data sets.

  • <thead>: Contains the table headers.
  • <tbody>: Contains the table data.
  • <tfoot>: Contains the table footer, such as summary or total rows.

Here's an example of a table with header, body, and footer sections:

HTML
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- Add table rows and data cells here -->
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
    </tr>
  </tfoot>
</table>
Live Playground, Try it Yourself

Styling Tables​

You can use CSS to style your tables, such as adding borders, padding, and alternating row colors. It's recommended to use an external CSS file for styling.

Here's an example of how to style tables using an external stylesheet:

HTML
<!-- Add a link to the external CSS file in the head section of your HTML document -->
<link rel="stylesheet" href="styles.css" />

In your styles.css file, add the following CSS rules:

CSS
/* Add a border to the table */
table {
  border-collapse: collapse;
  width: 100%;
}

/* Add a border to table cells */
th,
td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

/* Style table headers */
th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* Add alternating row colors */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* Add a hover effect to table rows */
tr:hover {
  background-color: #ddd;
}
Live Playground, Try it Yourself

Responsive Tables​

Responsive tables adapt their layout based on the user's screen size and resolution. To create a responsive table, you can use CSS and the max-width property, along with the overflow-x property for scrolling on small screens.

CSS
/* Make the table responsive */
@media screen and (max-width: 768px) {
  table {
    width: 100%;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}
Live Playground, Try it Yourself

Accessibility​

Ensure your tables are accessible by providing captions and proper markup for table sections like <thead>, <tbody>, and <tfoot>. Use the <caption> element to add a caption to your table, describing the purpose or content of the table.

HTML
<table>
  <caption>
    Example table with a caption
  </caption>
  <!-- Add table headers, rows, and data cells here -->
</table>
Live Playground, Try it Yourself

Conclusion​

Tables are an important HTML element for presenting structured data on web pages. In this tutorial, you learned how to create and style tables in HTML using table elements like <table>, <tr>, <th>, and <td>, as well as how to divide tables into sections with <thead>, <tbody>, and <tfoot>. You also learned about table accessibility, responsiveness, and styling.

As you continue to develop your web development skills, you'll encounter more advanced techniques for working with tables, such as using JavaScript to sort, filter, and paginate table data, or using CSS to create more advanced table layouts and designs. Keep practicing and experimenting with different table structures and styles to create visually appealing and accessible web pages.