HTML Tables With Cheatsheet

Welcome to day 2 of your 90 days of web development. In this lecture we’re talking about HTML tables.

What are tables in HTML?

ThisIs
ATable
This is a table in HTML!

Tables are used to display tabular data. A while ago, developers used tables for layouts, but that’s no longer recommended.

You should only use them if the data you’re explaining makes sense to be in a table. Like an itemized receipt or a list of contact information.

Let’s take a look at how to build tables with HTML tags.

HTML Table Tags

The <table> tag defines a table. Like a div, it is not visible by itself.

See the Pen Tables tag by Eddy Chung (@rising_block) on CodePen.

This table doesn’t look like much without rows in it.

To add rows to your table, you can use the tags <tr> which stands for table row, and <td> which stands for table data. If you use <tr> without <td> you could get some unexpected results.

See the Pen Tables rows by Eddy Chung (@rising_block) on CodePen.

If you want to add multiple columns, simply add more <td> tags in your row.

See the Pen Tables rows and columns by Eddy Chung (@rising_block) on CodePen.

Notice how rows can have different numbers of columns. There are no restrictions on how many columns each row can have.

table head

Often you’ll want a table head. You can also think of these as column labels.

To define a table header, use the tag <thead>.

Instead of using <td> to define your column headings, you use <th> which stands for table heading.

See the Pen Tables rows and columns with headers by Eddy Chung (@rising_block) on CodePen.

Notice that by default, table headings are bold. I’ll talk about changing the styles in during the CSS lessons.

Table body

Table body is an optional tag. It’s not required, but recommended when you have a table header or a footer.

You can surround the content of your table (whatever’s not in the header/footer) with a <tbody> tag like so:

See the Pen Tables with headers and body by Eddy Chung (@rising_block) on CodePen.

Table Footer

Table footers are the last row of a table. They’re used often for totals or averages.

The tag for the footer is <tfoot>.

See the Pen Tables with headers, body, footer by Eddy Chung (@rising_block) on CodePen.

HMTL Table Attributes

There are two table attributes you should know.

colspan

Column span defines how many columns one cell will take. The attribute is colspan and it’s default is 1.

See the Pen Colspan by Eddy Chung (@rising_block) on CodePen.

Rowspan

Row span defines how many rows one cell will take. The attribute is rowspan and it’s default is 1.

See the Pen Rowspan by Eddy Chung (@rising_block) on CodePen.

Where are the borders though?

Borders can be added with CSS! Right now we’re focusing on learning HTML, but don’t worry a future lesson will cover adding borders to tables.

Challenge

Create a table with data you care about! Sports, weather, whatever you’re into. Try to use all the tags and attributes to test your understanding.

Leave a Comment