Website Templates Table Editing

Table Centering and Borders in HTML5


With HTML5 templates centering and borders are done differently than in HTML 4.01. The examples below show how a table is sized, centered and borders are added.


HTML 4.01 Example
HTML 4.01 add a one cell centered table:
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>


For more on tables in HTML 4.01 templates see Resizing Template Tables for pre-2013 HTML 4.01 templates.


Before you start: Check your Allwebco template css file to see that you do have the classes "center-div" and "td-center" near the top of the file. The following codes were added to the template css file to allow for centering.


HTML 5 Example
/* 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:


<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.



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>


Optionally, edit the "center-div" and "td-center" from center to left or right.



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">



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; }



Example: Chart table:
Copy and paste the code below to add the following chart table. Works in both HTML5 and HTML 4.01 websites and web templates.


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 #2: Add to your CSS style file:




Or optionally... Step #2: Add to the head section of your HTML page:
Use this code if you do not have a CSS file.










Related Topics:
Editing The HTML Pages
Choosing Software


Software for Editing:
Software Choices


Allwebco Template Support


Allwebco Website Template Support


See Also...
Table Widths
HTML5 Tables
Center Logo & Menu
Table Margins
Sizing Chart Table
Fixed Page Width
Add a Sidebar


HTML Websites
Lissa Explains it All



Allwebco Web Templates
Complete websites with built in scripts.
AllwebcoDesign.com
Website Template Support
HTML5 Web Template Help
Setting up an HTML5 and CSS website.
AllwebcoDesign.com
Web Template Support
Mobile Web Templates
Mobile configured HTML5 templates.
AllwebcoDesign.com
Website Template Support
Shopping Cart Templates
Professional templates with built-in Paypal.
AllwebcoDesign.com



Website Template Support
Website Template Support