• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Talk About Local HomepageTalk About Local

Hyperlocal in the UK

  • Home
  • Working with us
  • In the press
  • Blog
  • Contact
  • LNE

Adding Tables To A Post

4th January 2012 by Mike Rawlins

We occasionally get asked about how to create tables in posts like this

column 1 Coumn 2 column 3
row 1
row 2
row 3
row 4

It is easier than it looks, you could create your table in your favourite word processing package and just copy and paste it in to your blog, but this will probably give you some strange results with fonts & text sizes that may break in different browsers.

The more elegant solution is to create the table manually so you get just the bits of code you need.

Unfortunately there is no easy way to do this in the in built editor on a wordpress.com site so you have to hand craft the code, but don’t panic this is not as daunting as it sounds.

To create the table above I used this HTML code:

<table width=”90%” cellspacing=”0″ cellpadding=”0″>
<tr>
<td>column 1</td>
<td>Coumn 2</td>
<td>column 3</td>
</tr>
<tr>
<td>row 1</td>
<td></td>
<td></td>
</tr>
<tr>
<td>row 2</td>
<td></td>
<td></td>
</tr>
<tr>
<td>row 3</td>
<td></td>
<td></td>
</tr>
<tr>
<td>row 4</td>
<td></td>
<td></td>
</tr>
</table>

 

To get it to work and so the code does not look like it does above, you must paste it in to the HTML tab of the create / edit post or page window. If you don’t then you will just see the code as it is above rather than the table at the top of the page.

A bit of information about the code to help you understand it better and to help you adapt it for your requirements.

<table width=”90%” cellspacing=”0″ cellpadding=”0″> <- this sets your table up to be 90% of the width of the page with no spacing or padding around the cells.

I always make the table less than the width of the page as it looks nicer, make sure you use a % and not pixel width. Pixel (a number without the %) is a set width and if you change your theme at any time the width of the table could be bigger than the width of the page and it will break and look ugly.
<tr> <- this tells the table it is a new row
<td> <- this creates a new column, what you put in here will show up in the first cell as long as it is before this -></td>
</tr> <- this closes the row

All you do is repeat the code for each row you need.

The number of columns on each row needs to be the same other it will start to cause problems.

Feel free to copy, adapt and use the bit of code above or you could ask Google to find you a HTML Table Generator.

You can of course go it to great detail with your tables and set rows to different heights or columns to different widths, add padding etc. You can find out how to do this by asking google

  • About
  • Latest Posts
Follow Mike
Mike Rawlins
I look after the technical side of things at Talk About Local.
Away from Talk About Local I take photos, fly my quadcopter and walk my two Beagles.
If I'm not doing any of the above then you'll find me volunteering at my local RNLI station as a press officer.
Follow Mike
Latest posts by Mike Rawlins (see all)
  • Let sleeping hyperlocals lie? - 20th February 2017
  • #TAL16 - 13th September 2016
  • Digital Inclusion & Participation - 2nd March 2014

Filed Under: Quick Tips, Wordpress Guides and Tips Tagged With: Coding, Guides, HTML, mike rawlins, posts, Tables, tips, wordpress

Reader Interactions

Comments

  1. Pezholio says

    4th January 2012 at 9:16 am

    Nice primer, but it’s worth pointing out that for tables to be fully accessible to people who use screenreaders (such as blind or partially sighted people), the headers should be marked up as rather than , together with a scope attribute (either scope=”row” or scope=”column”), so using your example, the table should be marked up as follows:

    column 1
    Coumn 2
    column 3

    row 1

    row 2

    row 3

    row 4

    This also has the added advantage of (by default anyway) making the headers bold, so it makes the table easier to read for sighted users too. If you know your way round CSS too, you can also style the headers differently.

    There are also other elements, such as the element, and the summary attribute, which also help accessibility further still, and they’re covered in more detail here:

    http://webaim.org/techniques/tables/

    There’s also an accessible table builder here too:

    http://accessify.com/tools-and-wizards/accessibility-tools/table-builder/

  2. Michael Rawlins says

    4th January 2012 at 10:52 am

    Cheers Pez,

    For wordpress.com sites CSS editing is not an option unless you pay for the upgrade to allow you to edit.

  3. Pezholio says

    4th January 2012 at 12:07 pm

    Oh bum, just noticed my code got edited out. Try this:

    Nice primer, but it’s worth pointing out that for tables to be fully accessible to people who use screenreaders (such as blind or partially sighted people), the headers should be marked up as rather than , together with a scope attribute (either scope=”row” or scope=”column”), so using your example, the table should be marked up as follows:

    column 1
    Coumn 2
    column 3

    row 1

    row 2

    row 3

    row 4

    This also has the added advantage of (by default anyway) making the headers bold, so it makes the table easier to read for sighted users too. If you know your way round CSS too, you can also style the headers differently.

    There are also other elements, such as the element, and the summary attribute, which also help accessibility further still, and they’re covered in more detail here:

    http://webaim.org/techniques/tables/

    There’s also an accessible table builder here too:

    http://accessify.com/tools-and-wizards/accessibility-tools/table-builder/

  4. Pezholio says

    4th January 2012 at 12:08 pm

    Sorry, how about this:

    Nice primer, but it's worth pointing out that for tables to be fully accessible to people who use screenreaders (such as blind or partially sighted people), the headers should be marked up as <th> rather than <td>, together with a scope attribute (either scope="row" or scope="column"), so using your example, the table should be marked up as follows:

    <table width=”90%” cellspacing=”0″ cellpadding=”0″>
    <tr>
    <th scope="col">column 1</th>
    <th scope="col">Coumn 2</th>
    <th scope="col">column 3</th>
    </tr>
    <tr>
    <th scope="row">row 1</th>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <th scope="row">row 2</td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <th scope="row">row 3</th>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <th scope="row">row 4</th>
    <td></td>
    <td></td>
    </tr>
    </table>

    This also has the added advantage of (by default anyway) making the headers bold, so it makes the table easier to read for sighted users too. If you know your way round CSS too, you can also style the headers differently.

    There are also other elements, such as the <caption> element, and the summary attribute, which also help accessibility further still, and they're covered in more detail here:

    http://webaim.org/techniques/tables/

    There's also an accessible table builder here too:

    http://accessify.com/tools-and-wizards/accessibility-tools/table-builder/

  5. Dave Harte says

    5th January 2012 at 11:01 am

    I end up doing quite a few tables as I run the website for my local running club and sometimes want to publish results and embed them on a page.

    I vary between embedding a google spreadsheet in an iframe (example) or creating the spreadsheet in excel, selecting and copying it, then pasting it into the visual editor on wordpress (example.

    The latter system works fine and produces pretty clean code. Stuart’s advice is really useful though and I could tinker with the code to produce a more accessible table.

Footer

Search

  • Contact
  • Guidelines
  • Legal

© 2021 · talk about local · Maintained by Mike