Table Tag

The HTML table tag has done wonders for the internet as a whole. However, tables are often used as grids or containers, which is not the appropriate use of HTML tables. Tables are not very flexible and are primarily intended to show tabular data. The tags of a table require more opening and closing tags than the average HTML element. Let’s look at an example to see:

Example

Result
Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2

Three separate tags are involved in creating an HTML table, <table>, <tr>, and<td>. The <table> is simply the encasing of a table. To identify a new row, which must come first, you should use the <tr> tag. Inside of the table row tag, you can specify columns by using the <td> tag. Remember that you can access all of the accepted HTML attributes of every element by clicking the w3.org reference in the HTML Attributes references.

It’s worth mentioning that you must structure the table and table tags properly. All tr must be opened and closed inside the <table></table> tags. The th and td tags must be opened and closed inside the tr tags. If you do this incorrectly, you will have one messed up looking table.

Table Headers

Sometimes when creating an HTML table, you might want the top row to stand out from the rest as a heading. All you need to do is replace the HTML table column tag, <td>, with a table header tag, <th>. It is entirely possible to use these multiple times different rows to have multiple “sections” in your table. Table headers also permit you to have better control of your CSS.

Example

Merging Columns

Sometimes, you might want to merge two columns to display your data correctly in a row. All we need to do is use the colspan attribute of the HTML table. Let’s merge two columns in one row.

Example

Result
Row 1 Column 1
Row 2 Column 1 Row 2 Column 2

References

If you enjoyed this resource, support me by sharing this page with others.
Share on Facebook
Facebook
Share on StumbleUpon
StumbleUpon
Digg this
Digg
Tweet about this on Twitter
Twitter
Share on Reddit
Reddit

Leave a Comment

  1. If one were to ask a hypothetical question about how to refer to a table column I don’t think you could mean td because this technically means just a single cell within a column – I think that the col tag would be a more accurate answer to that hypothetical question…

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.