Top HTML Tables Tutorial
HTML tables were first introduced in the HTML 2.0 RFC 1942 specification in May of 1996 and were further refined in the HTML 3.2 specification in January of 1997. Tables were created to allow designers to arrange data easily into rows and columns. Because tables allowed great control over the location of data, tables were often used as structural elements of websites with entire websites consisting of tables within tables as their website design. Due to the difficulty in modifying table-based design along with the advent of cascading style sheets (CSS), tables have fallen out of favor. Tables have now been relegated now to displaying tabular data, data that is best displayed in a chart format.
There are three main pieces of an HTML table, the 'table' tag, the 'tr' tag and the 'td' tag. The 'tr' tag denotes a new table row, while a 'td' tag creates a new table cell. In addition to these tags, there are the optional tags of 'th', 'thead', 'tbody', and 'tfoot'. These tags can be used to help separate your table into sections to allow greater control over the appearance of the table.
When building a table, it's important to ensure that every table row has the same number of cells within it. If you do not have the same number of cells in each row, unpredictable things will happen that will distort the appearance of your table. A cell can be expanded through use of the colspan attribute to cover the area of multiple cells. The rowspan attribute can be used to have a table cell extend multiple rows vertically. The example below uses the colspan attribute and can give an idea of how it is used.
HTML Table Resources:
W3C Table Documentation - Information and documentation about HTML tables from the W3C, the international web standards organization.
W3Schools on Tables - W3Schools is one of the most frequently used resources on the Internet for HTML Information.
HTML Table Generator - While it's not perfect, this markup generator will get you started with a table structure to build off of.
Formatting Pages with HTML Tables - Goes through the attributes that can be used on a table to modify its appearance.
What's Wrong with Tables for Layout - A short article about the problems in using tables for page layouts.
HTML Tags Relating to Tables - Some information about the specific markup tags tables use.
Tables and Screen Readers - Information from the Department of Health and Human Services about how tables should be used that still allows screen readers to function.
Avoiding Tables - Information about how to replace tables with divs. Divs can often be easier to work with.
Table Tutorials:
Table Tutorial - A tutorial that teaches you the structure of a table and walks you through making your own.
Introduction to Web Design - Tables - This guide walks you through tables and covers the attributes that can be used to stylize them.
Creating Tables with HTML - Information from Temple University about how to create tables. Their example uses a colspan in case you need more help with colspans.
Design Ideas for HTML Tables - An all-inclusive guide to making tables from the University at Hawaii.
Nesting Tables - Nesting tables is almost always a bad idea due to how confusing it is, but if you're trying to decipher someone else's tables, here is a guide on them.
Tables Tutorial - A great tutorial that goes over just about everything you can do with a table. Includes thead, tbody and tfoot tags.
HTML Table Basics - A great guide for beginners looking to dive into tables.