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 brows­er. A ta­ble can be 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­i­al on us­ing ta­bles, I can pro­vide a few di­rec­tion­al tips.

I’ve al­ready point­ed out the ways in which type­writer habits have en­dured. But the un­for­tu­nate truth about word proces­sors and web browsers is that their ba­sic mod­el for page lay­out is sim­i­lar to that of the type­writer of a hun­dred years ago: the doc­u­ment is han­dled as one big col­umn of text. That’s great if 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 oth­er 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­cif­ic lo­ca­tions on the page. If mak­ing these is frus­trat­ing with the usu­al lay­out tools, try us­ing a table.

How to insert a table

Word 2007 & 2010 InsertTables pan­el → Table → drag your cur­sor around the grid to set the num­ber of rows and columns.

Word 2011 Tables tab → Table Options pan­el → New → drag your cur­sor around the grid to set the num­ber of rows and columns.

Pages ’09 InsertTable. Pages will give you a four-row, three-col­umn ta­ble and open the ta­ble ed­i­tor in the In­spec­tor to al­low fur­ther adjustments.

HTML The three ba­sic tags are ta­ble, tr (for each row), and td (for each cell). HTML also sup­ports op­tion­al tags for cer­tain oth­er 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­cial­ly 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 oth­er cas­es, they can be use­ful. The goal is to im­prove the leg­i­bil­i­ty of the ta­ble. When you’re ready to for­mat your ta­ble, I rec­om­mend that you start by turn­ing off all the cell bor­ders, and then se­lec­tive­ly re­ac­ti­vate them as need­ed. (See rules and bor­ders for more tips.)

How to turn off cell borders

Word Right-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.

Pages ’09 If the cur­sor is in­side a cell, click out­side the ta­ble. Then click the ta­ble once to se­lect it. Open the In­spec­tor (com­mand + op­tion + i) → ta­ble icon in the top row (sev­enth from left) → Table. Un­der Cell Borders there’s a pop­up menu to set the cell-bor­der pat­tern. Change this to None.

CSS bor­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­i­ty 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­cial­ly in Word, are too tight. But add space gin­ger­ly—a lit­tle goes a long way. 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

Word Right-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″.

Pages ’09 If the cur­sor is in­side a cell, click out­side the ta­ble. Then click the ta­ble once to se­lect it. Open the In­spec­tor (com­mand + op­tion + i) → T icon in the top row (fourth from left) → TextInset Margin. Use the slid­er to ad­just cell mar­gins. Pages only lets you set one val­ue that ap­plies to all four sides of each cell.

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

by the way
  • Web purists like to note that se­man­ti­cal­ly, ta­bles shouldn’t be used pure­ly for lay­out pur­pos­es in web pages. “Use CSS floats,” they say. Un­for­tu­nate­ly, CSS floats can’t do every­thing that ta­bles can. A new CSS lay­out mode called flexbox is start­ing to be sup­port­ed in browsers, and may fi­nal­ly bring ta­ble-qual­i­ty con­trol to CSS. But if you need com­pat­i­bil­i­ty with old­er browsers, a ta­ble might still be the best tool for the job.