HTML tables are a relatively easy way to take a large amount of information and tabular data and display it in nice, neat rows and columns. Unfortunately, however, the use of tables in modern HTML is discouraged; tables are not all that responsive and usually appear a bit squished when viewed on smaller and/or older model mobile phones.

One of the better ways of displaying your data in a grid with rows and columns is to use the Bootstrap framework to set up your web page and tables. I love working with Bootstrap code, and tried my hand at it a while back and created a little CSS, Bootstrap and JavaScript-based Photo Guessing Game.
 
For a tutorial on getting started with Bootstrap, there are lots of free resources out there, including this one from the nonprofit freeCodeCamp. The mission of freeCodeCamp is to help people learn to code for free. I’ve learned a lot from them in the past and find their website to be a great resource.

 
For more info on working with HTML tables, we have a previous post on that subject entitled Easy Ways to Style HTML Tables (and remove the borders).

Ok, so let’s get on with setting up an HTML table, adding borders to it – then lastly, removing only the outside border.

 
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:

 
Let’s begin styling our table by creating CSS classes and/or IDs that will effect its various elements (or pieces). We’ll create a <div> 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 add a different color to the alternating rows, to make the table easier to read (so the tabular 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.
 
Example of how to add the “first-child” and “last-child” pseudo classes/CSS selectors:
 
#firstTable tr:nth-child(even) {
background-color: gray;
}

OR
 
#firstTable tr:nth-child(odd) {
background-color: gray;
}

Table with full borders – internal borders and a border around the whole thing

Here is the CSS for that:

#firstTable table td {
border: 2px solid black;
}
#firstTable th {
background-color: #FFCC00;
color: #0033FF;
border: 2px solid black;
}
#firstTable td {
background-color: #2A87FF;
color: white;
border: 2px solid black;
}

 
Here is how that appears in a browser:

Table with the left and right outer borders removed

Here is how that appears in a browser after removing the left and right outer borders:
 

Here is the CSS for that:

#secondTable table td {
border: 2px solid black;
}
#secondTable th {
background-color: #FFCC00;
color: #0033FF;
border: 2px solid black;
}
#secondTable td {
background-color: #2A87FF;
color: white;
border: 2px solid black;
}
#secondTable th:first-child {
border-left: none;
}
#secondTable td:first-child {
border-left: none;
}
#secondTable th:last-child {
border-right: none;
}
#secondTable td:last-child {
border-right: none;
}

And last but not least, this is how that code will appear in a browser after removing ALL outer borders:

Here is the CSS for that:

#thirdTable table td {
border: 2px solid black;
border-bottom: none;
}
#thirdTable th {
background-color: #FFCC00;
color: #0033FF;
border: 2px solid black;
border-top: none;
}
#thirdTable td {
background-color: #2A87FF;
color: white;
border: 2px solid black;
}
#thirdTable th:first-child {
border-left: none;
}
#thirdTable td:first-child {
border-left: none;
}
#thirdTable th:last-child {
border-right: none;
}
#thirdTable td:last-child {
border-right: none;
}

Alternate way to remove ALL outer table borders while still displaying all internal borders

Here is the CSS for that:

#fourthTable table {
border-collapse: collapse;
border-style: hidden;
}
#fourthTable th {
background-color: #FFCC00;
color: #0033FF;
border: 2px solid black;
}
#fourthTable td {
background-color: #2A87FF;
color: white;
border: 2px solid black;
}

Please let me know in the comments – what are your thoughts on the use of HTML tables, and what are your favorite alternate ways to code them?

Tags: apply border inside a tabledisplay all borders of HTML tablesHow to Show Internal Borders in HTML Tables