Styling HTML Tables with CSS

Fancy html table – Styling HTML Tables with CSS | Stylish CSS Tables | HTML Table CSS Examples

by

fancy html table: In this tutorial, we will be learning how to style HTML tables with CSS properties or functions. Also, you can check some HTML Table CSS Examples from the below sections via using direct links available below:

How to Set Different Properties of an HTML table using CSS

You can set the following properties of a table:

  • The border-collapse defines whether the browser needs to control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style.
  • The border-spacing names the width that should appear between table cells.
  • The caption-side captions are shown in the<caption>element. By default, these are rendered above the table in the document. You use the caption-side property to control the placement of the table caption.
  • The empty-cells specify whether the border should be shown if a cell is empty.
  • The table-layout permits browsers to speed up the layout of a table with the help of the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it.

Also Check:

How to Style a Table with CSS

By using Tables with CSS we can create a fancy page layout.

At first, let’s watch the table in HTML:

<table>
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Age</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Mainak</th>
          <td>22</td>
        </tr>
        <tr>
          <th scope="row">Soham</th>
          <td>22</td>
        </tr>
      </tbody>
    </table>

The default browser style is not very much attractive.

table default

We can use CSS on the table element to modify it for an even better look.

We can start with a border for the table.

We can apply it on thetableelement, and on the inner elements too, like th and td:

table,
th,
td {
  border: 1px dashed #333;
}

After putting a border we get a nice result.

table border

One common thing with tables is the ability to add color to one row, and a different color to another row. This is possible using the :nth-child(odd) or :nth-child(even) selector:

tbody tr:nth-child(odd) {
  background-color: greenyellow;
}

That gives us:

table border color

If we add border-collapse: collapse; to the table element, all borders are collapsed into one:

table border collapse

Leave a Comment