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?
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.
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.
If you want to add multiple columns, simply add more <td> tags in your row.
Notice how rows can have different numbers of columns. There are no restrictions on how many columns each row can have.
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.
Notice that by default, table headings are bold. I’ll talk about changing the styles in during the CSS lessons.
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:
Table footers are the last row of a table. They’re used often for totals or averages.
The tag for the footer is <tfoot>.
HMTL Table Attributes
There are two table attributes you should know.
Column span defines how many columns one cell will take. The attribute is colspan and it’s default is 1.
Row span defines how many rows one cell will take. The attribute is rowspan and it’s default is 1.
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.
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.