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:
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
Mike Rawlins
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.
Latest posts by Mike Rawlins (see all)
- Let sleeping hyperlocals lie? - 20th February 2017
- #TAL16 - 13th September 2016
- Digital Inclusion & Participation - 2nd March 2014
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/
Cheers Pez,
For wordpress.com sites CSS editing is not an option unless you pay for the upgrade to allow you to edit.
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/
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/
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.