Tables are a mainstay of HTML coding. They allow you to arrange the page's content in rows and columns. You can control the width and height of the table cells, the spacing between them, backgrounds and borders. It is hard to imagine a successful Web site without some tables somewhere among the pages.
The simplest table possible requires these tags:
<table>
<tr>
<td>
Some content for this cell
</td>
</tr>
</table>
The w3.css stylesheet includes some very handy classes which can be used to make responsive tables.
The main w3.css classes for making tables are:
An additional hint is this: If you need to adjust some CSS properties in your own stylesheet and your properties don't seem to be affecting your table, try adding an !important modifier to the style property in your stylesheet. An example could be adjusting the horizontal alignment of a cell. You might need something like this:
text-align: center !important;
Following is a sample w3-responsive table. This is a "planets" table. Here is the responsive planets table displayed in the browser.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Planets</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="respPlanets.css">
</head>
<body>
<div class="w3-container w3-responsive" id="mainDiv">
<table id="planets" class="w3-table w3-striped w3-border w3-bordered w3-hoverable">
<thead>
<tr>
<th>Planet Name</th>
<th>Distance from Sun (AU)</th>
<th>Orbital Period (years)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mercury</td>
<td>0.38709893</td>
<td>0.2408467</td>
</tr>
<tr>
<td>Venus</td>
<td>0.72333199</td>
<td>0.61519726</td>
</tr>
<tr>
<td>Earth</td>
<td>1</td>
<td>1.0000174</td>
</tr>
<tr>
<td>Mars</td>
<td>1.52366231</td>
<td>1.8808476</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Copyright © 2020</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
Here is the stylesheet, respPlanets.css:
body
{
font-family: Arial, sans-serif;
}
html
{
box-sizing: border-box;
}
*, *:before, *:after
{
box-sizing: inherit;
}
#mainDiv
{
width: 50%;
margin: 0 auto;
}
th, td
{
border: 1px solid lightgrey;
}
thead
{
background-color: rgba(0,0,0,.2);
}
tfoot td
{
text-align: center !important;
}
Please NOTE these points about the above table:
Cell alignment refers to how the content of each cell is aligned horizontally and vertically within the cell.
Please note that vertical alignment works only in table cells and in some other elements called "inline" elements, which we will see later in the course.
The following table has its left cell aligned vertically to "top" and the right cell aligned vertically to "bottom". This is page twoColumnTable.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Two-Column Table</title>
<link rel="stylesheet" type="text/css" href="twoColumn1.css" />
</head>
<body>
<table id="twoColumn">
<tr>
<td id="colOne">
This is a one-row, two-column table. This is column one.
</td>
<td id="colTwo">
This is column two of the table.
</td>
</tr>
</table>
</body>
</html>
And the stylesheet is twoColumn1.css:
body
{
font-family:Arial,sans-serif;
}
#twoColumn
{
width:600px;
height:200px;
border:1px solid black;
border-collapse:collapse;
margin-left:auto;
margin-right:auto;
}
#colOne
{
width:300px;
vertical-align:top;
border:1px solid black;
background-color:#FFFFCC;
}
#colTwo
{
width:300px;
vertical-align:bottom;
border:1px solid black;
background-color:#CCFFFF;
}
The page looks like this in the browser.
If you would like some space between the cell content and the side (edge) of the cells, you can code a non-zero value for the padding: style property in the <td> or <th> tags that you need padding in.
Please note that the padding property (meaning: padding applied with a style rule) must be applied to the <td> tag or the <th> tag.
Also please note that the padding property may be applied to many other HTML elements/tags in addition to the <td> and <th> tags. Our current discussion is about tables, only.
The table above with padding:20px; added to the #colOne and #colTwo selectors in the stylesheet, looks like this in the browser.
You should note that the gap between the text and the sides of the cells, is the padding.
If you would like some space between the individual cells, you can code a non-zero value for the border-spacing: style property.
(But the border-spacing property is not supported by versions of Internet Explorer earlier than version 8.)
Please note that the border-spacing property is applied to the <table> tag.
Also please note that border-spacing is NOT COMPATIBLE with the border-collapse property. If you also have border-collapse applied to your table, it will make border-spacing redundant and ineffective as a style property in your table.
The table above, with border-spacing:20px; added to the #twoColumn selector, and with border-collapse:collapse; commented out, looks like this in the browser.
Please note these points about the above code:
Centering a table works the same as for block-level elements, even though a table is not tecnically a block-level element. Tables do not expand to fill the entire available horizontal space unless the content inside the table requires it, so you usually do not need to give the table an explicit width.
To center a table, set the table's left and right margins to auto, like this (assuming that the <table> tag has an id="mainTable" attribute in it):
#mainTable
{
margin-left: auto;
margin-right: auto;
}
Table data cells can span more than one column. Column spanning is done with the colspan attribute. Here is some code that shows several cells spanning more than one column:
<table class="genericTable">
<tr class="centered">
<td colspan="2">1 & 2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="centered">
<td>5</td>
<td>6</td>
<td colspan="2">7 & 8</td>
</tr>
</table>
and it looks like this in the browser:
| 1 & 2 | 3 | 4 | |
| 5 | 6 | 7 & 8 | |
You should note these points about the above code:
Table data cells can also span multiple rows. Row spanning is done with the rowspan attribute. Here is some code that shows how row spanning works:
<table class="genericTable">
<tr class="centered">
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="2">4</td>
</tr>
<tr class="centered">
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
and it looks like this in the browser:
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 |
You should note these points about the above code:
Things can get really complicated really fast when you start spanning multiple rows and columns in the same table. You probably should draw the table on paper before you start coding in HTML. Here, for example, is a table that spans multiple rows and columns:
<table class="genericTable">
<tr>
<td colspan="2">Columns 1 & 2<br/>Row 1</td>
<td rowspan="4">Column 3<br/>Rows 1, 2, 3, & 4</td>
</tr>
<tr>
<td>Column 1<br/>Row 2</td>
<td>Column 2<br/>Row 2</td>
</tr>
<tr>
<td>Column 1<br/>Row 3</td>
<td rowspan="2">Column 2<br/>Rows 3 & 4</td>
</tr>
<tr>
<td>Column 1<br/>Row 4</td>
</tr>
</table>
and it looks like this in the browser:
| Columns 1 & 2 Row 1 |
Column 3 Rows 1, 2, 3, & 4 |
|
| Column 1 Row 2 |
Column 2 Row 2 |
|
| Column 1 Row 3 |
Column 2 Rows 3 & 4 |
|
| Column 1 Row 4 |
||
You should note these points about the above code:
IMPORTANT: A nested table must be contained by a set of <th>...</th> or <td>...</td> tags in the containing (outer) table.
The same table pattern that we just accomplished above with colspan and rowspan can also be done with nested tables. Here is some code that shows how it can be done (but keep in mind that this is not the only way to do it; there are usually many ways to approach a problem like this). This is page nestedTables2.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Nested Tables</title>
<link rel="stylesheet" type="text/css" href="nestedTables2.css">
</head>
<body>
<div id="tableDiv">
<table id="table1">
<tr>
<td class="td1 tdTableContainer">
<table id="table2">
<tr>
<td class="td2 tdTextContainer">
Row 1<br>Columns 1 & 2
</td>
</tr>
<tr>
<td class="td2b tdTableContainer">
<table id="table3">
<tr>
<td class="td3 tdTableContainer">
<table id="table4">
<tr>
<td class="td4 tdTextContainer">
Row 2<br>Column 1
</td>
<td class="td4b tdTextContainer">
Row 2<br>Column 2
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="td3b tdTableContainer">
<table id="table5">
<tr>
<td class="td5 tdTableContainer">
<table id="table6">
<tr>
<td class="td6 tdTextContainer">
Row 3<br>Column 1
</td>
</tr>
<tr>
<td class="td6b tdTextContainer">
Row 4<br>Column 1
</td>
</tr>
</table>
</td>
<td class="td5b tdTextContainer">
Rows 3 & 4<br>Column 2
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="td1b tdTextContainer">
Rows 1, 2, 3, & 4<br>Column 3
</td>
</tr>
</table>
</div>
</body>
</html>
and it looks like this in the browser.
Now here is the stylesheet, nestedTables2.css:
/* Nested Tables Stylesheet */
#tableDiv
{
width: 310px;
margin: 0 auto;
}
table
{
border-collapse: collapse;
}
td
{
border: none;
border-collapse: collapse;
}
#table1
{
width: 300px;
height: 400px;
}
#table2
{
width: 200px;
height: 400px;
}
#table3
{
width: 200px;
height: 300px;
}
#table4
{
width: 200px;
height: 100px;
}
#table5
{
width: 200px;
height: 200px;
}
#table6
{
width: 100px;
height: 200px;
}
.tdTableContainer
{
padding: 0px;
}
.tdTextContainer
{
padding: 5px;
}
.td1
{
border: 1px solid black;
width: 200px;
height: 400px;
}
.td1b
{
background-color: #CCFFFF;
border: 1px solid black;
width: 100px;
height: 400px;
}
.td2
{
background-color: #FFFFCC;
border-bottom: 1px solid black;
width: 200px;
height: 100px;
}
.td2b
{
width: 200px;
height: 300px;
}
.td3
{
width: 200px;
height: 100px;
}
.td3b
{
width: 200px;
height: 200px;
}
.td4
{
background-color: #FFCCFF;
border-right: 1px solid black;
border-bottom: 1px solid black;
width: 100px;
height: 100px;
}
.td4b
{
background-color: #CCFFCC;
border-bottom: 1px solid black;
width: 100px;
height: 100px;
}
.td5
{
width: 100px;
height: 200px;
}
.td5b
{
background-color: #CCCCFF;
width: 100px;
height: 200px;
}
.td6
{
background-color: #FFFFCC;
border-bottom: 1px solid black;
border-right: 1px solid black;
width: 100px;
height: 100px;
}
.td6b
{
background-color: #FFCCCC;
border-right: 1px solid black;
width: 100px;
height: 100px;
}
Please note these points about the above code: