HTML Table Tutorial
This HTML table tutorial demonstrates how to create tables in HTML. It assumes you know how to create an HTML page. If you're not familiar with HTML try the HTML Tutorial.
Basic Table
In HTML, you create tables using the table tag, in conjunction with the tr and td tags. Although there are other tags for creating tables, these are the basics for creating a table in HTML.
Here's the code for a basic table:
You'll notice that we added a border
attribute to the table
tag. This particular attribute allows us to specify how thick the border will be. If we don't want a border we can specify 0 (zero). In many cases, you might choose to leave this value at zero so that you can use Cascading Style Sheets to define your table borders. More on this below.
Table Headers
Many tables, particularly those with tabular data, have a header row or column. In HTML, you can use the th tag.
Most browsers display table headers in bold text.
Colspan
You can use the colspan
attribute to make a cell span multiple columns.
Rowspan
Similar to what colspan is for columns, rowspan
enables you to make a cell span multiple rows.
Adding CSS to tables
You can format your tables using Cascading Style Sheets (CSS). Using CSS, you can specify background colors, border colors, border styles etc.
Wrap up
You can achieve some pretty amazing stuff with tables, especially when used in conjunction with CSS. If you'd like to learn more:
- If you are working with large tables, check out the tbody, thead, and tfoot tags.
- If you're working with really large tables and want them to load faster, check out the CSS table-layout property.
- To create multi-column layouts, check out the HTML layout page.
- To learn more CSS properties that you can apply to your HTML tables, see the complete list of CSS properties.