GeezerVison is showing practicaltypography.com — Tables | Butterick’s Practical Typography
tablesThe best tool for gridded or complex layouts
The good news: tables are one of the handiest tools in your word processor and web browser. A table is usually the right solution for layout problems where white-space characters aren’t up to the task.
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.
How to insert a table
WordInsert → Tables panel → Table → drag your cursor around the grid to set the number of rows and columns.
Mac OS Word Insert tab → Table → drag your cursor to set the number of rows and columns.
PagesInsert → Table → Basic. Pages will insert a small table, and open the table editor in the Inspector to allow further adjustments.
HTMLThe three basic tags are <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: cell borders and cell margins.
Cell borders are the lines around each cell in the table. Cell borders are helpful as guides when you’re loading information into the table. They’re less useful once the table is full. The text in the cells will create an implied grid. Cell borders can make the grid cluttered and difficult to read, especially in tables with many small cells.
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.)
How to turn off cell borders
WordRight-click in the table to display menu → Borders and Shading → Borders tab. In the column on the left labeled Setting, click the button next to None. Click OK.
PagesClick the table to select it. Go to View → Show Toolbar (or option + ⌘ + t) → Format button → Table pane. Under Table Outline, select None, and under Gridlines, deselect the two buttons on the left (that control horizontal and vertical cell borders, respectively)
CSSborder: none (though be careful: tables, table rows, and table cells can all have separate border settings)
Cell margins create space between the cell borders and the text of the cell. Increasing the cell margins is the best way to improve the legibility of a dense table.
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.
How to set cell margins
WordRight-click in the table to display menu → Table Properties → Table tab → Options. Under Default cell margins, enter the values. You can also use the up and down arrow keys to change the values in increments of 0.01″.
PagesClick inside the table and press ⌘ + a to select all cells. Then do View → Show Toolbar (or option + ⌘ + t) → Format button → Text pane → Layout pane → enter the measurement in Text Inset
CSSAdd padding to your td (table cell) selector.
by the way
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 than table. But by moving the table markup out of the HTML and into CSS, it’s ultimately more flexible.
undockmove
Heliotrope
Equity
Valkyrie
Century Supra
Concourse
Triplicate
buy fontclose
You are visitor 01402503 — GeezerVison does not store the pages you look up. Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.