How to Style Table with CSS for Maximum Impact and Get Noticed

You will encounter many attributes and tags when dealing with HTML (Hypertext Markup Language) and other markup languages such as XML. Tables are attributes you should always use to make it easy for users to scan, compare, and analyze large amounts of data.

With tables, users can see the key points, conclusions, or results at a glance, even without reading the entire article. You can use CSS to style and change the appearance of your tables.

These are some of the reasons why you may need to style a table in your application;

Improve visual appearance: Regular tables can be boring and plain. Styling such tables will improve their appearance and make them attractive to users.
Improve accessibility: Styling tables can make them accessible even to those with disabilities.
Improve readability: You can use different styling techniques to make it easy for users to scan through the data presented in your tables.
Branding: You can reinforce your brand identity when you apply consistent fonts and colors on your tables across your application.
Good for search engines: Organizing your data in tabular formats will be useful if you want to rank your website high in search engines.

Create a Basic Table with HTML

To demonstrate how a table works in HTML, we shall create a project folder, navigate into the folder and create two files; index.html, which will carry our HTML code, and styles.css, which carries our CSS code (styling).

If you wish to follow along, use these commands to get started;

mkdir Styling-HTML-Tables

cd Styling-HTML-Tables

touch Styling-HTML-Tables

You now have the basic project folder to help you create HTML tables. I want to present different programming languages, their use cases, and examples of companies using these languages.

To create a HTML table, all the data should be enclosed in <table>...</table> tag.

In your HTML file, generate the basic structure of an HTML document. Add this code within the <body> tag.

<table>

        <tr>

          <th>Language</th>

          <th>Common Uses</th>

          <th>Companies Using</th>

        </tr>

        <tr>

          <td>Java</td>

          <td>Web apps, Android apps, enterprise applications</td>

          <td>Google, Amazon, LinkedIn</td>

        </tr>

        <tr>

          <td>Python</td>

          <td>Data science, web dev, automation</td>

          <td>Google, Dropbox,Spotify</td>

        </tr>

        <tr>

          <td>JavaScript</td>

          <td>Web dev, front-end dev, browser scripting</td>

          <td>PayPal, Facebook, Netflix</td>

        </tr>

        <tr>

          <td>C++</td>

          <td>Game dev, systems programming, embedded systems</td>

          <td>Tesla, Microsoft, Adobe</td>

        </tr>

        <tr>

          <td>Swift</td>

          <td>iOS development, macOS development</td>

          <td>Apple</td>

        </tr>

        <tr>

          <td>PHP</td>

          <td>Web dev, server-side scripting, CMSs</td>

          <td>WordPress, Wikipedia, Yahoo</td>

        </tr>

      </table>

If you take a close look at this table, you will note a few more tags enclosed within the <table> tag; <tr>, <th>, and <td>.

These tags do the following;

<tr>, table row, is enclosed within the <table> element. The <tr> tag can enclose one or more <th> and <td> elements.
<th> , table header, is contained within the <tr> tag. By default, its contents are bolded.
<td>, table data, describes the contents of data in table cells.

When you render the code that we have written above, we will have this on our browser;

CSS Properties Used for Styling Tables

The table we have created above is fully functional. However, it leaves much to be desired as it is not styled well. To achieve the desired styles and make the table visually appealing, we will use CSS.

Remember the CSS file we created? It is now time to use it. However, you must first import your CSS file to your HTML file for the styling to work. We named our CSS file styles.css. On the <head> section of your HTML document, add the following;

<link rel="stylesheet" href="styles.css">

We are now ready to style our table. We can style it as follows;

#1. Border

We can add a border all around the cells in our table. To achieve this, we will define a border property on the <th> and <td> elements. We can set the border to 2px.

th, td {

    border: 2px solid orange;

  }

We have set the border value as 2 and added orange as our color.

When you render the new page, you will see the following;

#2. Border-collapse

If you examine the screenshot above, you will note that there are spaces between the borders of every cell. The border-collapse property determines whether adjacent cells in a table should share a border.

If you want the cells to share a border, add this code to your CSS file;

table {

  border-collapse: collapse;

}

When you render your page, you can see that the cells share borders as follows;

If you want the cells to have different borders, add this to your CSS file;

table {

  border-collapse: separate;

}

The rendered page will appear as follows;

#3. Border-spacing

Using the border-space property, we can create a small space between the cells in our table. We set the rule inside the table class in our CSS file.

For this property to work, we need to use border-collapse: separate; property.

We can have our table class as follows;

table {

    border-collapse: separate;

    border-spacing: 3px;

  }

The borders on cells have a space of 3px.

When you render the table, it will appear as follows;

#4. Table-layout

The Table-layout property determines the nature of the table. You can have tables that always have the same length. On the other hand, you can also create tables that change based on content.

If we want to have cells that have similar sizes, we can set the table-layout property as fixed.

table-layout: fixed;

Our final code on the table class will be;

table {

    border-collapse: collapse;

    border-spacing: 3px;

    table-layout: fixed;

  }

If we want cells that change based on contents, we can change the table-layout property to auto.

table-layout: auto;

The final table class in our CSS code will be;

Check the last cell on the table and note that I have added these words; MailChimp and so much more.

You can now see the cells in the last row are bigger than the rest as the table layout is flexible based on the contents.

The styling we have covered so far focused on the entire table. We can now focus on individual classes by changing the background color, font, and text alignment properties for rows, cells, or headers.

We can style these properties as follows;

#5. Background color

We can change the background of our top row to yellow-green. We can use the :first-child pseudo-class selector to achieve our goals.

Add this code to your CSS code;

tr:first-child {

    background-color: yellowgreen;

  }

The final displayed code will appear as follows;

#6. Font

We can change the font style or font size of specific rows, columns or cells in our table.

We will target the contents of the last column in our page (Companies Using) to change the font style.

We will italicize all the contents in this column by targeting the td:last-child class selector. You can add the following code to your CSS file;

td:last-child {

  font-style: italic;

}

The final output will be as follows when you reload the rendered page;

We can also change the first column’s font color and size to make it unique.

Add the following code to your CSS file;

tr td:first-child {

    color: red;

    font-size: x-large;

    font-weight: bolder;

  }

When you render your page, you will note the following; the contents in the first column (Language) have a bigger font size, are Red, and are bolder.

How to Make the Table Responsive

The table we have created may not be responsive to small screens. You can use Chrome’s Developer Tools or an external tool like this to test if your code is responsive.

There are several approaches that you can take but will cover just one.

Follow these steps;

Set the width of the <table> element in your code;

table {

  width: 100%;

  border-collapse: collapse;

  table-layout: fixed;

}

Set word-break on td and th to make long words in the cell.

th, td {

    border: 2px solid orange;

    word-break: break-word;

  }

Best Practices for Styling Tables

CSS can be fun once, especially when you know it. These are some of the best practices to ensure you get the best when styling your tables;

Use an external style sheet: We had an option of using inline styling, but we chose an external sheet. We have been able to reuse our styling across different tables, reducing development time.
Keep it simple: You may get carried away and over-style your tables. However, always maintain a simple design and make your tables scannable and readable.
Add borders to your tables: A border makes a table easy to read and scan.
Use consistent colors: If you have several tables across your web pages, ensure you use consistent colors and fonts. Using your brand colors can improve your brand visibility.
Make your tables responsive: You may never know the screen size of the end users’ devices.
Use captions to describe your tables: The caption briefly describes what the table is all about.
Use white spaces to separate your tables: If several tables follow each other, add some white space and caption them accordingly.

Conclusion

I believe now you can create and style a basic HTML table. We may not have covered everything, as HTML and CSS are broad. You can create smaller or bigger tables, depending on the nature of the data you want to capture.

Check out the CSS cheat sheets if you want to learn more about CSS and how to use it to improve your UI.

Titus Kamunya

Author

Titus is a Software Engineer and Technical Writer. He develops web apps and writes on SaaS, React, HTML, CSS, JavaScript, Ruby and Ruby on Rails read more