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

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

Mac WordInsert tab → Table → drag your cur­sor around the grid 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.


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

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.

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

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 Valkyrie Century Supra Equity Concourse Hermes Maia Triplicate buy font close