Scribd
Upload
257 views

Week 6 Lecture 2: Tables

Tables allow content to be organized into rows and columns. The minimum required for a table are the <table>, <tr>, and <td> tags. Additional columns are added with more <td> tags on each row, and more rows are added after the first. Tags like <thead>, <tbody>, and <tfoot> can group table cells, and <th> tags make header cells bold. The border-collapse property controls whether cells have individual or shared borders. While tables require many tags, copying and pasting empty rows makes building them easier. Tables are well-suited for organizing data but less so for layouts on smaller screens.

Uploaded by

Grantham University
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
257 views

Week 6 Lecture 2: Tables

Tables allow content to be organized into rows and columns. The minimum required for a table are the <table>, <tr>, and <td> tags. Additional columns are added with more <td> tags on each row, and more rows are added after the first. Tags like <thead>, <tbody>, and <tfoot> can group table cells, and <th> tags make header cells bold. The border-collapse property controls whether cells have individual or shared borders. While tables require many tags, copying and pasting empty rows makes building them easier. Tables are well-suited for organizing data but less so for layouts on smaller screens.

Uploaded by

Grantham University
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Week 6 Lecture 2: Tables

Some content is best displayed as a table. Tables consist of columns and rows. Where each
column and row intersect, you have a cell. The minimum required for a table are table, table
row, and table data cells:
<table>
<tr>
<td></td>
</tr>
</table>

To add more columns across, just add more <td> tags on each row. Then add more rows as
needed after the first.
You can also add <thead>, <tbody>, and <tfoot> tags to group the cells. This makes it easier to
style certain portions of your table. <th> tags give your table a header. These cells are
automatically bold.

Note: Your book uses <tfooter> instead of <tfoot>. <tfoot> is the official tag per the W3C.
Be sure to use <tfoot> to ensure your pages validate correctly.
Tables can be styled like most other elements. There is a good list of properties on page 390.
Most of them are self-explanatory, such as height, width, and text-align. Border-collapse is a
little different. The default setting for borders has every cell with its own border, giving it a
double-line border, like this:

Changing it to border-collapse: collapse; gives it a single line.

Creating a table is not difficult, but requires a lot of tags, which can make it tedious. One thing
that can make it easier is to create a row with all of its tags, but no data yet. Then copy and paste
that row over and over as many times as needed. Then go back and add data to the cells.
Creating the entire empty table first, can make it easier in the long run.
Tables are also sometimes used for layouts. It used to be the best way to get sections of your
page in exactly the spot you wanted them, so you may see it in older pages (or those done by
older developers ). Now we have more options in HTML5, so you see this used less. Tables
are also more difficult to work with when designing for smaller screens. But tables still have lots
of great uses, so they are well worth learning.

You might also like