Styling Specific HTML Table, Row, Columns and Cells

A few days ago a client came to me with a newly designed layout of a table he wanted to be added to existing website with the same colors and styles.

It got me thinking about back in the day when Bootstrap, Foundation or responsive frameworks did not exist a large number of sites used tables for layout.

In this quick tutorial I want to share with you how to style HTML tables and specifically targeting single rows, columns and even specific cell.

I created the table using the following HTML code :

<table >
<tbody>
<tr>
<td><strong>Day</strong></td>
<td><strong>Location</strong></td>
<td><strong>Accommodation</strong></td>
<td><strong>Trip </strong></td>
<td><strong>Activity</strong></td>
</tr>
<tr>
<td>Day 01</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
</tr>
<tr>
<td>Day 02</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
</tr>
<tr>
<td>Day 03</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
</tr>
<tr>
<td>Day 04</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
</tr>
<tr>
<td>Day 05</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
</tr>
<tr>
<td>Day 06</td>
<td>Table</td>
<td></td>
<td>Table</td>
<td>Table</td>
</tr>
</tbody>
</table>

Styling HTML Table

To style the table I began by adding the white background and the borders :

<style>

/* 
 * Setting Table Background Color and Border Styles 
 */


table {
   width: 100%;
   margin-bottom: 20px;
   background: #fff;
}

table, table tr, table tr td, table tr th {
   border: solid 1px #ddd;
}

</style> 

After creating the table and setting the background, we need to add the background color to the top row and this is how you get that done:

<style>

/*
 * Setting Background Color for First Row & First Column on the Table 
 */

    tr:first-child {
    background: yellow;
    }
    td:first-child {
    background: yellow;
    }

</style>

In the code we are targeting the first row and setting the background color to yellow so that we can get the table style as it was designed.  We also added the code to target the first column and set the background color to yellow.  This will result in the following :

You can set style to specific column by using  td:nth-child(columnnumber) .

You can also set the background color of the middle column or a row using the same styling tricks like the following  code adds a background color to the third coulmn :

<style>

/*
*   Adding background color to third column in the table
*/

   td:nth-child(3) {
   background: #ff9b05;
   }

</style>

The result of the styling code above will be as shown in the image below :

Styling Specific HTML Table Cell

We can also style a specific cell in the table to make it stand out. Like in the column above we can make the first cell background to be red in color using the following code :

<style>

/*
* Styling Specific Cell in a HTML Table 
*/

   tr:first-child td:nth-child(3) {
   background: #e41e1e;
   }

</style>

The result of the code above will be as shown in the image below:

Finally lets do a final style to the middle cell in the table, we will use the following code to add orange background to the middle cell by targeting it using the code below:

/*
 *  Final Table Style to the Center Cell 
 */ 
      tbody tr:nth-child(4) td:nth-child(3) {
      background: orange;
    }

The result of the final table will appear as shown in the image below:

Are you looking for a professional WordPress developer or frontend developer? Feel Free to Get in Touch.

Similar Articles