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 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­ial on us­ing ta­bles, I can pro­vide a few di­rec­tional tips.

I’ve al­ready pointed 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 model 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 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

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

Word 2011 Tables tab → Table Options panel → 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­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.


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 that you start by turn­ing off all the cell bor­ders, and then se­lec­tively re­ac­ti­vate them as needed. (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 popup 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­ity of a dense table.

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
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. 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 slider to ad­just cell mar­gins. Pages only lets you set one value that ap­plies to all four sides of each cell.

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

by the way
  • Web purists like to note that se­man­ti­cally, ta­bles shouldn’t be used purely for lay­out pur­poses in web pages.Use CSS floats,” they say. Un­for­tu­nately, CSS floats can’t do every­thing that ta­bles can. A new CSS lay­out mode called flexbox has in­creas­ing sup­port in browsers, and may fi­nally bring ta­ble-qual­ity con­trol to CSS. But if you need com­pat­i­bil­ity with older browsers, a ta­ble might still be the best tool for the job.