Table Centering and Borders in HTML5
Website template HTML5 table building & editing
In HTML5 websites centering and borders are done differently than in HTML 4.01. The HTML code is similar, but more css is used. The examples below show how a table is created, sized, centered and borders are added.
See Also…
See Also…
HTML 4.01 one cell centered table (older code)
Use the following code for a 500 pixel wide centered table with centered contents:
<center>
<table style="width: 500px;"><tr><td align="center" valign="top">
Content
</td></tr></table>
</center>
See also: HTML 4.01 table support
HTML5, as a general rule, uses less table code and more div "float" code (float:left;), especially in responsive designs. Tables are still part of the HTML5 standards and are useful for presenting information in columns and rows.
Before you start (current code)
Check your global css file to see that you do have the classes "center-div" and "td-center" near the top of the file. The following classes are included in Allwebco HTML5 and responsive web template css files to allow for centering and alignment.
/* DEFAULTS - ALIGNMENT */
.td-right { text-align: right; }
.td-left { text-align: left; }
.td-center { text-align: center; }
.td-top { vertical-align: top; }
.td-middle { vertical-align: middle; }
.td-bottom { vertical-align: bottom; }
.center-align { text-align: center; }
.center-div { margin-left: auto; margin-right: auto; }
.right-div { margin-left: auto; margin-right: 0; }
.left-div { margin-left: 0; margin-right: auto; }
HTML5 add a one cell centered table or div:
Use the following code for a 500 pixel wide centered table with centered contents (if your global css file includes the above classes):
<table class="center-div" style="width: 500px;"><tr><td class="td-center">
Content
</td></tr></table>
...or for a div use...
<div class="center-div td-center" style="width: 500px;">
Content
</div>
Optionally, edit the "center-div" and "td-center" from center to left or right. If you do not require columns or rows, then using a div is the better choice in most cases.
One cell centered table with border:
Same as above with a border added:
<table class="center-div" style="width: 500px; border: #999999 1px solid;"><tr><td class="td-center">
Content
</td></tr></table>
...or for a div use...
<div class="center-div td-center" style="width: 500px; border: #999999 1px solid;">
Content
</div>
Optionally, edit the "center-div" and "td-center" from center to left or right. If you do not require columns or rows, then using a div is the better choice in most cases.
Two cell centered table with outer border:
Same as above with a second cell and an outer border added:
<table class="center-div" style="width: 500px; border: #999999 1px solid;"><tr><td class="td-top td-center">
Content
</td><td class="td-top td-center">
Content
</td></tr></table>
Optionally, edit the "center-div" and "td-center" from center to left or right.
Two cell centered table with all borders:
Same as above with a second cell and borders for all cells:
<table class="center-div" style="width: 500px;"><tr><td class="td-top td-center" style="border: #999999 1px solid;">
Content
</td><td class="td-top td-center" style="border: #999999 1px solid;">
Content
</td></tr></table>
Optionally, edit the "center-div" and "td-center" from center to left or right.
Adding padding:
To add padding, add a class to your table and add the padding code to your CSS file at the bottom of the file.
Class added "mytable1" example:
<table class="center-div mytable1" style="width: 500px;"><tr><td class="td-center">
Content
</td></tr></table>
Add the following to the bottom of your css file for, in order: top, right, bottom and left padding:
table.mytable1 td { padding: 10px 10px 10px 10px; }
If your website does not have a global css file, instead add the following to the <head> section of your HTML page.
<style type="text/css">
table.mytable1 td { padding: 10px 10px 10px 10px; }
</style>
Example: Chart table:
Copy and paste the code below to add the following 4 row, 3 column chart table. Works in both HTML5 and HTML 4.01 websites and web templates.
Note: In responsive websites and web templates, use caution when adding more columns so your table does not exceed around 300 pixels in width (text will wrap) and you maintain your webpage responsiveness.
|
Item Name |
Item Details |
Size |
|
Name A |
Det A |
1 |
|
Name B |
Det B |
2 |
|
Name C |
Det C |
3 |
Step #1: Add to your HTML page:
Step #2A: Add to your CSS style file:
Can be added to the bottom of your global css file or in most any other spot. If you use this option do not use option #2B below.
Step #2B: Add to the head section of your HTML page:
Optionally... Use this code ONLY if you do not have a global CSS file (style.css or similar name). You can view the source code of this page to see where the following code is added to the <head> section of your HTML page.
Related Topics:
Template File Types
Choosing HTML Editing Software