Tables have been a very useful tool for website developers pretty much since the beginning of the internet.  In the “old days” of web development html tables were all over the place, and were widely used both for displaying data in a grid AND for laying out elements on a web page.  Fortunately, nowadays there are better coding methods of handling page layout, such as HTML5, Bootstrap, Flexbox, using CSS div tags, and so on.

And so, while tables aren’t generally used anymore for layout purposes, they are still alive and kicking in terms of being used for displaying data grid-style.

I’ve been using/coding html tables myself since about 1997 and have had a bit of a love/hate relationship with them.

LOVE:  they are a relatively easy way to take a large amount of information and align it in nice, neat rows and columns.

HATE:  they are fundamentally not responsive and usually look terrible on small-sized mobile phones.

That being said – there are ways of getting around the limitations of the traditional html table code and forcing it into a state of responsiveness (to different sized screens, such as phones, tablets, etc.)  To get more information on how to do just that, take a look at this excellent tutorial on Responsive HTML Table Techniques & Examples by Speckyboy.

Another thing I LOVE about html tables is that they can be styled and manipulated in cool, fun ways – just like most other HTML elements.

The way to do this is by styling your html table with CSS.

 
The following examples are just a few ways to have fun with tables!

 
First set up the code for your html table something like this:

<table>
<tbody>
<tr>
<th>Table Header first column</th>
<th>Table Header second column</th>
<th>Table Header third column</th>
</tr>
<tr>
<td>data goes here</td>
<td>data goes here</td>
<td>data goes here</td>
</tr>
<tr>
<td>more data here</td>
<td>more data here</td>
<td>more data here</td>
</tr>
</tbody>
</table>

The code above will output a very basic table in the browser that looks similar to this:

 
Ok- let’s begin styling our table by creating CSS classes and/or IDs that will effect its various elements (or pieces). We’ll use the <div> html element to create an area to wrap around the table, then will add a CSS ID to the opening “div” tag. That way we can start to style our table in different ways.

This is how that encasing “div” tag looks after adding the CSS ID:
<div id="firstTable">
<table>
the rest of the table code goes here
</table>
</div>

Next let’s add a different color to the alternating rows, to make the table easier to read (so the content doesn’t blend all together). We can use our previously established ID of “firstTable” to select the “tr” HTML element. This targets the rows of the table. To avoid having to code some CSS for every single row we can simply use the “nth-child” CSS pseudo-class verbiage to highlight a bunch of rows at once. We can use this method to target all of the even rows and/or all of the odd rows in our table.

Table with a border and differently colored rows

Here is the CSS for a simple way to style a table using this method:

#firstTable table {
border: 3px solid black;
}
#firstTable th {
background-color: lightblue;
}
#firstTable tr:nth-child(even) {
background-color: #FFFF99;
}

 
Here is how that appears as seen in a web browser:

 
If you would like to add a nice shadow behind the table, add a snippet of code like this:
box-shadow: 9px 9px 10px gray; to your outermost “DIV” tag or to the “table” element, as follows:
#firstTable table {
border: 3px solid black;
box-shadow: 9px 9px 10px gray;
}

Table with no outside border

Here is the CSS for removing the border around your table (or making it invisible), then adding a gradient background to all of the “td” elements (individual table cells):

#secondTable table {
border: none;
color: white;
}
#secondTable td {
background: linear-gradient(to right, #0033FF, #3399FF);
color: white;
}
#secondTable th {
background-image: linear-gradient(to right, #FFCC00, yellow);
color: #0033FF;
}

 
Here is how that appears in a browser:

Note: you can use “border: none;” or “border: 0px;”. Either way it results in the outside border being removed from your table.

Table with no borders at all and added padding

Here is the CSS for removing ALL borders from your table, then adding a gradient background to the entire background area of the table:

#thirdTable table {
border: none;
}
#thirdTable tr {
background: linear-gradient(to right, #0033FF, #3399FF);
}
#thirdTable td {
color: white;
border: none;
padding: 15px 8px 15px 8px;
}
#thirdTable th {
color: #FFCC00;
border: none;
}

 
Here is how that appears in a browser:

Table with a skew (slanted) effect applied to the individual data cells

Here is the CSS for skewing all of the data cells within your table, then skewing the text back to normal:

#fourthTable table {
border: none;
/* box-shadow: 9px 9px 7px grey; */
}
#fourthTable tr {
background: linear-gradient(to right, #0033FF, #9999FF);
transform: skewX(10deg);
}
#fourthTable td {
color: white;
padding: 13px 7px 13px 7px;
transform: skewX(-10deg);
}
#fourthTable th {
color: #FFE16B;
font-size: 17px;
transform: skewX(-10deg);
}

 
Here is how that appears in a browser:

I have no idea when you’d actually use a funky looking table like that, but it’s an interesting effect at least!
 

Thank you for reading – please share this article when you have a minute, and come visit us again!

Tags: css table design examples with codehow to hide HTML table border using CSShtml table remove borderhtml table stylesstyling an html table with css