Adding a table to your website is a useful way to present large amounts of information clearly. Tables also provide an efficient use of space, and let you more easily read and compare complex data.

You can design tables to be more visually appealing using CSS. Doing so can also enhance the overall user experience for your website.

Modern Single Rows and Columns Design

You can add a simple table design with single rows and columns and no merged cells. Styling the table also ensures your webpage is engaging for the user. Other than table styling, there are other cool HTML effects and CSS display website layouts you can add to your website.

You can view the code for this exercise in its GitHub repo.

  1. In a new HTML file, add the basic HTML code structure: 
            <!DOCTYPE html>
    <html>
      <head>
        <title>My Simple Table</title>
      </head>
      <body>
     
      </body>
    </html>
  2. Inside the body, add table tags: 
            <table>
            
    </table>
  3. The HTML table element should contain table row tags for each row inside the table. The top row is commonly used for headings. Use table header HTML tags to represent each column in the table: 
            <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  4. Add more rows underneath the header row. Use table data HTML tags to add data into each cell in the table: 
            <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
      <td>Row 1, Column 3</td>
    </tr>
    <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
    </tr>
    <tr>
      <td>Row 3, Column 1</td>
      <td>Row 3, Column 2</td>
      <td>Row 3, Column 3</td>
    </tr>
    <tr>
      <td>Row 4, Column 1</td>
      <td>Row 4, Column 2</td>
      <td>Row 4, Column 3</td>
    </tr>
    <tr>
      <td>Row 5, Column 1</td>
      <td>Row 5, Column 2</td>
      <td>Row 5, Column 3</td>
    </tr>
  5. Add a style tag inside the head tag. Add some general styling to the table, such as shadows, rounded table corners, fonts, and margins: 
            <style>
      table {
        border-collapse: collapse;
        width: 100%;
        color: #333;
        font-family: Arial, sans-serif;
        font-size: 14px;
        text-align: left;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        margin: auto;
        margin-top: 50px;
        margin-bottom: 50px;
      } 
    </style>
  6. Style the table header to give it a background color and aligned text: 
            table th {
      background-color: #ff9800;
      color: #fff;
      font-weight: bold;
      padding: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
      border-top: 1px solid #fff;
      border-bottom: 1px solid #ccc;
    }
  7. Style the table rows to alternate between gray and white colors, and to add an effect when hovering over the row: 
            table tr:nth-child(even) td {
      background-color: #f2f2f2;
    }

    table tr:hover td {
      background-color: #ffedcc;
    }
  8. Style the data inside the cells of the table: 
            table td {
      background-color: #fff;
      padding: 10px;
      border-bottom: 1px solid #ccc;
      font-weight: bold;
    }
  9. Open your HTML file to view the table in a web browser:
    HTML table in browser

Multi-Lined Cell Table Design

Some tables include columns with merged rows to form a multi-lined cell.

  1. Remove all the current table rows, keeping only the top one with the headings: 
            <table>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </table>
  2. Create a multi-lined cell using the rowspan attribute. This will expand that cell across the specified number of rows. 
            <!-- Section 1 -->
    <tr>
      <td rowspan="2">Multi-line cell</td>
      <td>Row 1, Column 2</td>
      <td>Row 1, Column 3</td>
    </tr>
    <tr>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
    </tr>
  3. When adding another multi-celled line with a different rowspan value, add the corresponding number of table rows HTML tags. This is to match the height or number of rows that the cell spans across. For example, if a cell has a rowspan of 3, you will need to add three rows to the other columns to align the table properly. 
            <!-- Section 2 -->
    <tr>
      <td rowspan="3">Multi-line cell</td>
      <td>Row 3, Column 2</td>
      <td>Row 3, Column 3</td>
    </tr>
    <tr>
      <td>Row 4, Column 2</td>
      <td>Row 4, Column 3</td>
    </tr>
    <tr>
      <td>Row 5, Column 2</td>
      <td>Row 5, Column 3</td>
    </tr>
  4. Open your HTML file to view the table in a web browser:
    HTML table multi lined cells

Merged Row Table Design

Similar to multi-lined cells, tables can also have rows that merge over multiple columns.

  1. Remove all the current table rows, keeping only the top one with the headings: 
            <table>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </table>
  2. Add more table rows to the table. Use the colspan attribute to merge one of the rows across 3 columns: 
            <!-- Section 1 -->
    <tr>
      <td style="background-color: #ffedcc" colspan="3">Q1</td>
    </tr>
    <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
    </tr>
    <tr>
      <td>Row 3, Column 1</td>
      <td>Row 3, Column 2</td>
      <td>Row 3, Column 3</td>
    </tr>
    <tr>
      <td>Row 4, Column 1</td>
      <td>Row 4, Column 2</td>
      <td>Row 4, Column 3</td>
    </tr>
  3. Add another merged row to separate the sections of the table: 
            <!-- Section 2 -->
    <tr>
      <td style="background-color: #ffedcc" colspan="3">Q2</td>
    </tr>
    <tr>
      <td>Row 6, Column 1</td>
      <td>Row 6, Column 2</td>
      <td>Row 6, Column 3</td>
    </tr>
    <tr>
      <td>Row 7, Column 1</td>
      <td>Row 7, Column 2</td>
      <td>Row 7, Column 3</td>
    </tr>
    <tr>
      <td>Row 8, Column 1</td>
      <td>Row 8, Column 2</td>
      <td>Row 8, Column 3</td>
    </tr>
  4. Open your HTML file to view the table in a web browser:
    HTML table merged rows in browser

Use Attractive Tables to Make the Best of Your Data

HTML tables are a great way of displaying structured data on your website. You can style them with CSS to improve the default appearance. However, make sure you don’t get carried away and use tables for layout—for accessibility reasons, keep them strictly for data.

Larger tables can be laborious to create and update, especially if you make use of columns and rows that span. You can write your own code to generate the markup or take advantage of friendlier syntaxes like Markdown.