DesignCools

Design Table with CSS

—

by

designcools
in

Table css are essential components in web development, used to display data in rows and columns. With CSS, you can style tables to make them visually appealing and enhance their functionality.

What is Table?

Tables are powerful tools for organizing and displaying data on web pages. CSS provides immense flexibility in styling tables to suit various use cases, from simple lists to advanced layouts with merged cells, responsive designs, and fixed headers. By combining CSS properties with best practices, you can create tables that are both functional and aesthetically pleasing.

1. <table>

The <table> tag defines the outer container of a table. All table-related elements must be nested inside this tag.

Attributes:

align: Aligns the table on the page (deprecated; use CSS).

border: Sets the width of the table’s border (deprecated; use CSS instead).

<table border="1">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

Preview

#NameAgeOccupationCountry
1John Doe28EngineerUSA
2Jane Smith34DesignerCanada
3Michael Brown41ManagerUK
4Emily Davis25DeveloperAustralia
5Chris Wilson37TeacherIndia
6Anna Johnson29PhotographerGermany
7David Martinez33WriterSpain
8Sophia Lee22StudentSouth Korea
9Daniel Evans40ChefItaly
10Lisa Brown27ArtistFrance

Show Code


  <style>
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f9;
}

.table-container {
  max-width: 800px;
  margin: 0 auto;
  overflow-x: auto;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.styled-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  text-align: left;
}

.styled-table thead tr {
  background-color: #171717;
  color: #ffffff;
  text-align: center;
}

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

.styled-table tbody tr:nth-child(even) {
  background-color: #f3f3f3;
}

.styled-table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

.styled-table tbody tr:hover {
  background-color: #e9f5ff;
  cursor: pointer;
}

.styled-table tbody td {
  color: #333333;
  text-align: center;
}

.styled-table th {
  font-weight: bold;
}

/* Add some responsiveness */
@media (max-width: 600px) {
  .styled-table th, .styled-table td {
    font-size: 14px;
    padding: 10px;
  }
}

  </style>
</head>
<body>
  <div class="table-container">
    <table class="styled-table">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Age</th>
          <th>Occupation</th>
          <th>Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>John Doe</td>
          <td>28</td>
          <td>Engineer</td>
          <td>USA</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jane Smith</td>
          <td>34</td>
          <td>Designer</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Michael Brown</td>
          <td>41</td>
          <td>Manager</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Emily Davis</td>
          <td>25</td>
          <td>Developer</td>
          <td>Australia</td>
        </tr>
        <tr>
          <td>5</td>
          <td>Chris Wilson</td>
          <td>37</td>
          <td>Teacher</td>
          <td>India</td>
        </tr>
        <tr>
          <td>6</td>
          <td>Anna Johnson</td>
          <td>29</td>
          <td>Photographer</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>7</td>
          <td>David Martinez</td>
          <td>33</td>
          <td>Writer</td>
          <td>Spain</td>
        </tr>
        <tr>
          <td>8</td>
          <td>Sophia Lee</td>
          <td>22</td>
          <td>Student</td>
          <td>South Korea</td>
        </tr>
        <tr>
          <td>9</td>
          <td>Daniel Evans</td>
          <td>40</td>
          <td>Chef</td>
          <td>Italy</td>
        </tr>
        <tr>
          <td>10</td>
          <td>Lisa Brown</td>
          <td>27</td>
          <td>Artist</td>
          <td>France</td>
        </tr>
      </tbody>
    </table>
  </div>

2. <tr> (Table Row) – Row Table

The <tr> tag defines a single row in the table. It contains table header (<th>) or table data (<td>) cells.

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

3. <th> (Table Header)

The <th> tag is used to define header cells in a table. Content inside <th> is typically bold and centered by default.

Attributes:

  • scope: Specifies whether the header applies to a row (row) or a column (col)
<table border="1">
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

4. <td> (Table Data)

The <td> tag represents standard cells in the table. It is used to add data content.

<table border="1">
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

5. <thead> (Table Head)

The <thead> tag groups the header rows in a table. It is typically used in conjunction with <th> and separates the table header from the table body.

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

6. <tbody> (Table Body)

The <tbody> tag groups the main content rows of a table. It allows for better organization, especially when used with <thead> and <tfoot>.

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

7. <tfoot> (Table Footer)

The <tfoot> tag groups footer rows in a table. It is typically used for summary or total rows.

<table border="1">
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>$1</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>$2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$3</td>
    </tr>
  </tfoot>
</table>

Preview

#NameAgeOccupationCountry
First NameLast Name
1JohnDoe28EngineerUSA
2JaneSmith34DesignerCanada
3EmilyJohnson29Australia
4Chris Wilson37TeacherIndia
5SophiaLee22StudentSouth Korea
Total Entries: 5

Show Code

<style>
/* General Table Container Styling */
.drtable-container {
  max-width: 900px;
  margin: 0 auto;
  background-color: #f8f9fa;
  border-radius: 8px;
  overflow-x: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

/* Table Styling */
.drtable-advanced {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  text-align: left;
  background-color: #ffffff;
}

.drtable-advanced thead {
  background-color: #343a40;
  color: #ffffff;
}

.drtable-advanced thead th {
  padding: 12px 15px;
  font-weight: bold;
  text-align: center;
  border: 1px solid #dee2e6;
}

.drtable-advanced tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

.drtable-advanced tbody td {
  padding: 12px 15px;
  border: 1px solid #dee2e6;
  text-align: center;
}

.drtable-advanced tbody tr:hover {
  background-color: #d6eaff;
  cursor: pointer;
}

.drtable-advanced tfoot {
  background-color: #e9ecef;
}

.drtable-advanced tfoot td {
  font-weight: bold;
  text-align: center;
  padding: 12px 15px;
  border-top: 2px solid #dee2e6;
}

/* Responsive Table Styling */
@media (max-width: 600px) {
  .drtable-advanced th, .drtable-advanced td {
    font-size: 14px;
    padding: 10px;
  }
}

</style>

  <div class="drtable-container">
    <table class="drtable-advanced">
      <!-- Table Header -->
      <thead>
        <tr>
          <th rowspan="2">#</th>
          <th colspan="2">Name</th>
          <th rowspan="2">Age</th>
          <th rowspan="2">Occupation</th>
          <th rowspan="2">Country</th>
        </tr>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
        </tr>
      </thead>

      <!-- Table Body -->
      <tbody>
        <tr>
          <td>1</td>
          <td>John</td>
          <td>Doe</td>
          <td>28</td>
          <td>Engineer</td>
          <td>USA</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jane</td>
          <td>Smith</td>
          <td>34</td>
          <td rowspan="2">Designer</td> <!-- Rowspan Example -->
          <td>Canada</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Emily</td>
          <td>Johnson</td>
          <td>29</td>
          <td>Australia</td>
        </tr>
        <tr>
          <td>4</td>
          <td colspan="2">Chris Wilson</td> <!-- Colspan Example -->
          <td>37</td>
          <td>Teacher</td>
          <td>India</td>
        </tr>
        <tr>
          <td>5</td>
          <td>Sophia</td>
          <td>Lee</td>
          <td>22</td>
          <td>Student</td>
          <td>South Korea</td>
        </tr>
      </tbody>

      <!-- Table Footer -->
      <tfoot>
        <tr>
          <td colspan="6">Total Entries: 5</td>
        </tr>
      </tfoot>
    </table>
  </div>

Preview

First NameLast NameDesignationEmailPhoneActions
JohnDoeManagerjohn.doe@example.com1234567890
JaneSmithDeveloperjane.smith@example.com2345678901
Showing 1-5 of 10 entries

Show Code

<style>
    .advance.container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    /* Table Controls */
    .advance .table-controls {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 15px;
    }

    .advance #search-box {
        flex: 1;
        padding: 10px;
        max-width: 300px;
        margin-right: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .advance #download-btn {
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

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

    /* Responsive Table */
    .advance .table-wrapper {
        overflow-x: auto;
    }

    .advance table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 15px;
    }

    .advance thead {
        background-color: #007bff;
        color: #fff;
    }

    .advance th,
    td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ddd;
        white-space: nowrap;
    }

    .advance th input[type="checkbox"] {
        cursor: pointer;
    }

    .advance tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    /* Button Styles */
    .advance .edit-btn,
    .delete-btn {
        padding: 5px 10px;
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }

    .advance .edit-btn {
        background-color: #ffc107;
        color: #fff;
    }

    .advance .edit-btn:hover {
        background-color: #e0a800;
    }

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

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

    /* Footer */
    .advance tfoot {
        background-color: #f1f1f1;
        text-align: center;
        font-weight: bold;
    }

    /* Pagination */
    .advance .pagination {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .advance .page-btn {
        padding: 8px 12px;
        margin: 0 5px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

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

    /* Responsive Styles */
    @media screen and (max-width: 768px) {
        .advance th,
        td {
            font-size: 14px;
        }

        .advance .table-controls {
            flex-direction: column;
            align-items: flex-start;
        }

        .advance #search-box {
            margin-bottom: 10px;
            margin-right: 0;
        }

        .advance .page-btn {
            padding: 6px 10px;
            margin: 0 3px;
        }
    }
</style>

<div class="advance container">
    <div class="table-controls">
        <input type="text" id="search-box" placeholder="Search..." />
        <button id="download-btn">Download CSV</button>
    </div>

    <div class="table-wrapper">
        <table id="responsive-table">
            <thead>
                <tr>
                    <th><input type="checkbox" id="select-all" /></th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Designation</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>John</td>
                    <td>Doe</td>
                    <td>Manager</td>
                    <td>john.doe@example.com</td>
                    <td>1234567890</td>
                    <td>
                        <button class="edit-btn">Edit</button>
                        <button class="delete-btn">Delete</button>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>Jane</td>
                    <td>Smith</td>
                    <td>Developer</td>
                    <td>jane.smith@example.com</td>
                    <td>2345678901</td>
                    <td>
                        <button class="edit-btn">Edit</button>
                        <button class="delete-btn">Delete</button>
                    </td>
                </tr>
                <!-- Add more rows as needed -->
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="7">Showing 1-5 of 10 entries</td>
                </tr>
            </tfoot>
        </table>
    </div>

    <div class="pagination">
        <button class="page-btn">Prev</button>
        <button class="page-btn">1</button>
        <button class="page-btn">2</button>
        <button class="page-btn">Next</button>
    </div>
</div>

8. <caption>

The <caption> tag provides a title or brief description of the table. It is displayed above the table by default.

<table border="1">
  <caption>Product List</caption>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$10</td>
  </tr>
</table>

9. <colgroup>

The <colgroup> tag is used to group columns within a table for applying specific styles or attributes to those columns.

<table border="1">
  <colgroup>
    <col style="background-color: #f4f4f4;">
    <col style="background-color: #ffffff;">
  </colgroup>
  <tr>
    <td>Row 1, Col 1</td>
    <td>Row 1, Col 2</td>
  </tr>
</table>

10. <col>

The <col> tag is used within <colgroup> to define the properties of individual columns.

<table border="1">
  <colgroup>
    <col style="background-color: #f4f4f4; width: 50%;">
    <col style="background-color: #ffffff; width: 50%;">
  </colgroup>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>

11. <scope> Attribute

Though not a standalone tag, the scope attribute in the <th> tag is essential for accessibility. It specifies whether the header applies to a row, column, or group of rows/columns.

<table border="1">
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

Best Practices for Using Table Tags

  1. Use Semantic Elements: Always use <thead>, <tbody>, and <tfoot> for better readability and accessibility.
  2. Add Captions: Provide descriptive captions using the <caption> tag.
  3. Enhance Accessibility: Use scope attributes in <th> tags for assistive technologies.
  4. Avoid Deprecated Attributes: Use CSS instead of deprecated table attributes like align, border, or bgcolor.

CSS Tips for Tables

Use border-collapse for compact borders

table {
  border-collapse: collapse;
}

Add hover effects for better interactivity:

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

Style headers distinctly.

th {
  background-color: #4CAF50;
  color: white;
}

Check out – CSS Position.