- HTML tables are used for (shock!) tabular data.
- Basic layout:
<table>, <tr>, <td>, <th>.
[ Basic Table Source ]
- Each row is in a <tr>.
- Each cell in the row is in a <td> (table data).
- Headers are in a <th>.
- Not much difference from <td> than default styling.
- Not sure we need them anymore.
- With some basic styling. [ Styled Table Source ]
- And a <caption>.
- A little padding on the cells makes it looks less crowded.
- Text alignments appropriate to the data type.
- Centering.
- Font styles and decorations for headers.
Could just as well have used td with a class.
- Borders. [ Styled Table Source ]
- The <td> (or <th>) can have a border.
- By default, the cells are separated, and each have their own border.
- border-collapse: collapse
- Applies only to table.
- Causes adjacent cells to share borders.
- If they styles disagree, they are subject to some
peculiar priority rules,
in which hidden always wins,
none always loses, and other stuff happens in between.
- <td> can have a width, and borders may be selective.
- The bottom borders in the second row form an underline.
[ Binary Conversion Example Source ]
- Also, you can avoid typing all that and make a more
useful page. [ Any Binary Conversion Source ]
- Large table. [ Fall 2017 Schedule Source ]
- Borders. [ Spanning Source ]
- Cells may extend multiple columns or rows, with colspan
or rowspan.
- A cell may do both.
- When laying out a row, positions may alredy be filled from above;
they are skipped.