The good news:
The bad news: tables can be difficult to use. The user interface for editing them is complex and finicky. While I can’t give you a full tutorial on using tables in your word processor—refer to your manual or help file—I can give you a few directional tips.
I’ve already pointed out the ways in which typewriter habits have endured. But an unfortunate truth about word processors and web browsers is that their basic model for page layout is similar to that of a typewriter of a hundred years ago: the document is treated as one big column of text. That’s great when all you need is one big column of text. It’s not so great otherwise.
Tables are useful—
For spreadsheet-style grids of numbers or other data. In the typewriter era, grids like this would’ve been made with tabs and tab stops. These days, you’d use a table.
For layouts where text needs to be positioned side-by-side or floating at specific locations on the page. If making these is frustrating with the usual layout tools, try using a table.
<table>
, <tr>
(for each row), and <td>
(for each cell). HTML also supports optional tags for certain other table elements.
There are many ways to format a table. But default tables have two formatting defects you should always fix:
Cluttered | Athos | Porthos | Aramis |
---|---|---|---|
Priors? | Yes | No | Yes |
Alibi? | No | Yes | Yes |
Confession? | No | No | No |
Clean | Athos | Porthos | Aramis |
---|---|---|---|
Priors? | Yes | No | Yes |
Alibi? | No | Yes | Yes |
Confession? | No | No | No |
In this example, cell borders are unnecessary. In other cases, they can be useful. The goal is to improve the legibility of the table. When you’re ready to format your table, I recommend turning off all the cell borders to start, and then turning them back on as needed. (See rules and borders for more tips.)
border: none
(though be careful: tables, table rows, and table cells can all have separate border settings)
Dense | Athos | Porthos | Aramis |
---|---|---|---|
Phone | (617) 555 1453 | (508) 555 3232 | (603) 555 8490 |
Cell | (617) 555 3145 | (508) 555 2323 | (603) 555 8491 |
Fax | (617) 555 5413 | (508) 555 4545 | (603) 555 8492 |
Not | Athos | Porthos | Aramis |
---|---|---|---|
Phone | (617) 555 1453 | (508) 555 3232 | (603) 555 8490 |
Cell | (617) 555 3145 | (508) 555 2323 | (603) 555 8491 |
Fax | (617) 555 5413 | (508) 555 4545 | (603) 555 8492 |
The default cell margins, especially in Word, are too tight. But add space gingerly— a little goes a long way—start around 0.03″ and increase by increments of 0.01″. Also, there’s no need to make the cell margins the same on all sides. The top and bottom margins can be bigger than the side margins, if that looks right.
padding
to your td
(table cell) selector.
In HTML/CSS, you can still use the traditional
table
markup to make a table. But you can also use the newer CSS grid layout, which is now well supported in web browsers. Its syntax is knottier thantable
. But by moving the table markup out of the HTML and into CSS, it’s ultimately more flexible.