Tables
Everyone's heard of tables. Excel is basically one big table and it's often the best way to present a lot of data. A table lets you organise information into rows and columns. Tables are useful for things such as schedules, scores, prices, statistics and more.
On the web, tables aren't used very often. Yet they're a great way to practice "nesting".
A basic table uses four important tags:
<table>→ Contains the entire table.<tr>→ Creates a table row.<td>→ Creates a normal table cell.<th>→ Creates a heading table cell.
Notice the nesting: the cells are inside rows, and the rows are inside the table.
Table headings
The first row often explains what each column contains. For these cells we use <th> instead of <td>. The letters stand for table heading.
The browser normally displays <th> cells in bold, but their real purpose is to tell the browser that these cells are headings.
Tables quiz
Let's practice
A little more structure
Larger tables can be divided into a head and a body. This isn't required for every tiny table, but it makes the structure clearer and becomes useful when we start styling tables.
<thead>→ Contains the heading row or rows.<tbody>→ Contains the normal data rows.<tfoot>→ Contains a footnoteFootnote: A small note. It gives extra facts, explains words, shows sources, conditions,....
Don't confuse <head> with <thead>. <head> belongs to the entire HTML document. <thead> belongs to a table. That's what the "t" stands for.
Table attributes
Sometimes one cell needs to take the place of multiple normal cells. The colspan and the rowspan attributes let a cell take up multiple cells.
colspan="2"→ The cell will take up two columns. Horizontal cells.rowspan="2"→ The cell will take up two rows. Vertical cells
Mini Assignment 3
Copy your previous code so you can paste it here.
CSS
Our table works, but it doesn't look very exciting yet. HTML defines the structure of the page. CSS however is used to change how that structure looks.
Get started with CSS!Chapter roundup
Ooh, look at that! You've arrived at the bottom of the page, right where you left it! Can you figure out why that is?
Copy your previous code from the last "table" assignment so you can paste it here.