tablesThe best tool for gridded or complex layouts

The good news: ta­bles are one of the hand­i­est tools in your word proces­sor and web browser. A ta­ble is usu­ally the right so­lu­tion for lay­out prob­lems where white-space char­ac­ters aren’t up to the task.

The bad news: ta­bles can be dif­fi­cult to use. The user in­ter­face for edit­ing them is com­plex and finicky. While I can’t give you a full tu­to­r­ial on us­ing ta­bles in your word proces­sor—re­fer to your man­ual or help file—I can give you a few di­rec­tional tips.

I’ve al­ready pointed out the ways in which type­writer habits have en­dured. But an un­for­tu­nate truth about word proces­sors and web browsers is that their ba­sic model for page lay­out is sim­i­lar to that of a type­writer of a hun­dred years ago: the doc­u­ment is treated as one big col­umn of text. That’s great when all you need is one big col­umn of text. It’s not so great otherwise.

Ta­bles are useful—

  1. For spread­sheet-style grids of num­bers or other data. In the type­writer era, grids like this would’ve been made with tabs and tab stops. These days, you’d use a table.

  2. For lay­outs where text needs to be po­si­tioned side-by-side or float­ing at spe­cific lo­ca­tions on the page. If mak­ing these is frus­trat­ing with the usual lay­out tools, try us­ing a table.

How to insert a table

WordInsertTables panel → Table → drag your cur­sor around the grid to set the num­ber of rows and columns.

Mac OS Word Insert tab → Table → drag your cur­sor to set the num­ber of rows and columns.

PagesInsertTableBasic. Pages will in­sert a small ta­ble, and open the ta­ble ed­i­tor in the In­spec­tor to al­low fur­ther adjustments.

HTMLThe three ba­sic tags are <ta­ble>, <tr> (for each row), and <td> (for each cell). HTML also sup­ports op­tional tags for cer­tain other ta­ble elements.

There are many ways to for­mat a ta­ble. But de­fault ta­bles have two for­mat­ting de­fects you should al­ways fix: cell bor­ders and cell mar­gins.

Cell bor­ders are the lines around each cell in the ta­ble. Cell bor­ders are help­ful as guides when you’re load­ing in­for­ma­tion into the ta­ble. They’re less use­ful once the ta­ble is full. The text in the cells will cre­ate an im­plied grid. Cell bor­ders can make the grid clut­tered and dif­fi­cult to read, es­pe­cially in ta­bles with many small cells.

ClutteredAthosPorthosAramis
Priors?YesNoYes
Alibi?NoYesYes
Confession?NoNoNo
CleanAthosPorthosAramis
Priors?YesNoYes
Alibi?NoYesYes
Confession?NoNoNo

In this ex­am­ple, cell bor­ders are un­nec­es­sary. In other cases, they can be use­ful. The goal is to im­prove the leg­i­bil­ity of the ta­ble. When you’re ready to for­mat your ta­ble, I rec­om­mend turn­ing off all the cell bor­ders to start, and then turn­ing them back on as needed. (See rules and bor­ders for more tips.)

How to turn off cell borders

WordRight-click in the ta­ble to dis­play menu → Borders and ShadingBorders tab. In the col­umn on the left la­beled Setting, click the but­ton next to None. Click OK.

PagesClick the ta­ble to se­lect it. Go to ViewShow Toolbar (or op­tion + ⌘ + t) → Format but­ton → Table pane. Un­der Table Outline, se­lect None, and un­der Gridlines, de­s­e­lect the two but­tons on the left (that con­trol hor­i­zon­tal and ver­ti­cal cell bor­ders, respectively)

CSSbor­der: none (though be care­ful: ta­bles, ta­ble rows, and ta­ble cells can all have sep­a­rate bor­der settings)

Cell mar­gins cre­ate space be­tween the cell bor­ders and the text of the cell. In­creas­ing the cell mar­gins is the best way to im­prove the leg­i­bil­ity of a dense table.

DenseAthosPorthosAramis
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
NotAthosPorthosAramis
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 de­fault cell mar­gins, es­pe­cially in Word, are too tight. But add space gin­gerly— a lit­tle goes a long way—start around 0.03″ and in­crease by in­cre­ments of 0.01″. Also, there’s no need to make the cell mar­gins the same on all sides. The top and bot­tom mar­gins can be big­ger than the side mar­gins, if that looks right.

How to set cell margins

WordRight-click in the ta­ble to dis­play menu → Table PropertiesTable tab → Options. Un­der Default cell margins, en­ter the val­ues. You can also use the up and down ar­row keys to change the val­ues in in­cre­ments of 0.01″.

PagesClick in­side the ta­ble and press ⌘ + a to se­lect all cells. Then do ViewShow Toolbar (or op­tion + ⌘ + t) → Format but­ton → Text pane → Layout pane → en­ter the mea­sure­ment in Text Inset

CSSAdd padding to your td (ta­ble cell) selector.

by the way
  • In HTML/CSS, you can still use the tra­di­tional ta­ble markup to make a ta­ble. But you can also use the newer CSS grid lay­out, which is now well sup­ported in web browsers. Its syn­tax is knot­tier than ta­ble. But by mov­ing the ta­ble markup out of the HTML and into CSS, it’s ul­ti­mately more flexible.

undock move Heliotrope Equity Valkyrie Century Supra Concourse Triplicate buy font close