Short HTML Table Tutorial

Building tables for HTML5 and HTML 4.01

Create a 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 so you can maintain your webpage responsiveness. Optionally, for wide tables see section "making an existing table responsive" below to make any table scroll and be responsive.

Item Name
Item Details
Size
Name A
Det A
1
Name B
Det B
2
Name C
Det C
3


Step #1A: Add to your HTML page (smaller than 300 pixels):
Select this code ONLY if your table is less than 300 pixels wide.




Step #1B: Add to your HTML page (wider than 300 pixels):
Select this code IF your table is wider than 300 pixels wide. This code makes the table responsive (see also section below if you already have your table code).




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.




Making an existing table responsive
If you already have a table, and it's too wide for smartphone screens, you can make it responsive so it scrolls by using the following code in your HTML page. Nest your table inside the following div code:

<div style="overflow-x: auto;">
<table>
...
</table>
</div>





Related Topics:
HTML5 Table Editing
Check Your Website Version of HTML