➢Table coding for Wordpress/other CMS
Contents
Introduction – Important!
Making changes – Important!
01. Basic coding
02. Table width
03. Table alignment and text wrap
04. Column width
05. Borders
06. Vertical alignment of cell content
Making changes – Important!
01. Basic coding
02. Table width
03. Table alignment and text wrap
04. Column width
05. Borders
06. Vertical alignment of cell content
07. Horizontal alignment of cell content
08. Padding inside each cell
09. Other styling inside each cell
10. Background color
11. Cells that span more than one column
12. Cells that span more than one row
13. Optional elements
14. Images
08. Padding inside each cell
09. Other styling inside each cell
10. Background color
11. Cells that span more than one column
12. Cells that span more than one row
13. Optional elements
14. Images
Introduction
Tables are created in the “Text” (=code) editor. They are used to display content in rows and columns; that is, to display content as a grid of cells, with or without visible borders:| ROW1 COL1 CONTENT | ROW1 COL2 CONTENT | ROW1 COL3 CONTENT |
| ROW2 COL1 CONTENT | ROW2 COL2 CONTENT | ROW2 COL3 CONTENT |
| ROW3 COL1 CONTENT | ROW3 COL2 CONTENT | ROW3 COL3 CONTENT |
Most table tutorials and table generators use outdated coding. Moreover, tables on many of the newer WP themes aren’t ‘neutral’: each theme has its own default styling for tables. For both of these reasons, if you rely on an outdated table tutorial or table generator to create a table, you may get results other than the ones you expect: some of the coding may not work at all, some of it may work on older themes but not on newer ones, some of it may work now but stop working in the near future, plus the formatting may seem puzzling till you become familiar with what the CSS of a particular theme specifies for tables.
This tutorial is designed specifically for wordpress.com users, it’s designed to help you construct a table the way you want it regardless of what theme you’re using,* and it’s designed to keep working when HTML5 will have become the web standard.
* Unfortunately, this cannot also mean that your tables will remain unchanged if you switch to a different theme: since each theme has its own default styling, changing theme may result in a different appearance, i.e. different quirks you may need to override. To do this really effectively, you need to examine the CSS of the theme.
Prerequisite reading (for basic HTML terminology etc):
Introduction to HTML for wordpress.com users
Making changes
The basic table HTML will produce the required structure. Depending on the theme, the content of each cell, and what you’re aiming at, it may or may not produce the intended result: it may produce desirable or undesirable width(s), desirable or undesirable borders, desirable or undesirable spacing and alignment.So you’ll often need to modify things. To do this, do not use any of the following attributes inside any opening tag:
Everything you need to change or specify, except column width(s) as well as cells that span more than one row or column, requires the style attribute, with appropriate properties and values.
Note well: unlike other attributes (which accept only a single value), the style attribute accepts multiple properties and values. In the following sections you’ll see several related suggestions. When you need to use more than one of them for the same element, you write all the properties and values inside the straight quotes that follow the style attribute (syntax: property followed by colon followed by value followed by semicolon).
For example, in two different sections of this article you’ll see these two different suggestions:
If you need both of them, you combine them this way (the order doesn’t matter):
Naturally, if you have the Custom Design upgrade, you can change the default styling of tables once for all in the CSS editor. (But, again, if you switch theme you’ll have to make new changes.)
Tip: if you have created a table with many cells, and you need to make the same change to all of the opening td tags, the fastest way is to copypaste the whole table into a text file, use the find-and-replace tool, then copypaste the result back into the “Text” editor of your post or page.
01. Basic coding
To mark a table cell, you enclose its content in a pair of td tags:To mark a table row, you enclose a series of cell tag pairs in a pair of tr tags:
To mark a complete table, you enclose all the tr tag pairs in a pair of table tags:
So, a basic 3-column 3-row table would be this:
Naturally, all the rows need to have the same number of cells (exception: see sections 11 & 12).
Note: in the “Text” editor, each tag can be written on a separate line (as in the first three examples above), or on the same line with the previous or the next tag or the content it encloses (as in the fourth example) – no difference. For extra clarity, you can also add a blank line before any opening tag or after any closing tag – again no difference in the result.
02. Table width
On newer themes, the default table width is usually 100%. So if you want a table that covers the whole width of the post or page, you don’t have to do anything.If you want a narrower table, you specify a percentage in the opening table tag, for example:
If you do want a table that covers the whole width of the post or page but you’re using a theme that doesn’t do that by default, you turn the opening table tag to this:
Note: in fixed-width themes you can also specify the width by using px values, but in flexible-width or responsive themes this is wrong, as it will produce a fixed-width table inside a non-fixed post/page column (so if one views the post/page on a lower resolution screen, the table may be cut off or stretch into the sidebar area). If you aren’t sure about the theme you’re using, drag the browser window to make it narrower and see if the content area shrinks or not.
03. Table alignment and text wrap
Tables narrower than 100% are usually left-aligned, with no text wrap (the rest of the content will start below the table).To right-align such a table, you specify a percentage for its width, and set the remaining percentage as a left margin; for example:
To center such a table, you specify a percentage for its width, divide the remaining percentage by two, and set the result as a left and a right margin; for example:
To make the rest of the content wrap around a left-aligned table (start next to the table instead of below it), you specify a percentage for its width, and set the table to float left:
You’ll probably need to add a right margin as well (blank space between the table and the content that shows up next to the table):
You must also paste this at the point where the wrap around effect should stop:
Same things for a right-aligned table with text wrap, only with float:right and margin:left, of course.
04. Column width
If the amount of content inside the cells varies, the table columns will adopt varying widths, not necessarily in a satisfactory way. You can force the width(s) you prefer, by using the self-contained col tag.This tag is added right after the opening table tag (exception: see section 13/A).
To specify unequal column widths, you add col tags, as many times for as many columns:
Naturally, the percentages need to add up to 100 (even if the table width is set to less than 100%: the col widths refer to the width of the table itself, not to the width of the post).
For example, if you want a three-column table with its first column twice as wide as the other two, you’ll add this:
To make the width of all the columns equal, you add a col tag with the span attribute, once:
Naturally, the percentage needs to be 100 divided by the number of columns.
For example, to make all the columns of a six-column table equal, you write:
You can also use this version more than once, to specify groups of columns. For example, suppose you want a six-column table, with two equal columns that take up half of the table width, then four equal columns that take up the other half; you write:
Note: the specified width may not be applied if the columns are too many and/or too narrow, and contain words that are too long. In that case you probably need to decrease the overall font size.
05. Borders
If the theme automatically produces a border around the table (or on any of its sides), and you don’t want that, you write the opening table tag this way:If the theme automatically produces borders around the cells (or on any of their sides), and you don’t want that, you write each and every opening td tag this way:
Note: the default appearance of a table can be misleading on some themes. For instance, if you see horizontal lines only, you may think they are table row borders (that is, applied to the tr tags), but usually they are top or bottom cell borders (applied to the td tags).
If you do want a border around the whole table and/or around the table cells, or if you wish to change the border color (or its thickness or its style), you specify it this way:
Same thing for each and every opening td tag.
Note: the border property applies to all four sides of an element. You can apply changes to specific sides only, by using the respective properties: border-top, border-bottom, border-left, border-right.
The above example means thinnest possible, continuous line, light grey.
– Change the hex color code to change the color.
– Change the adjective to modify the style
– Change the px value to increase the thickness.
Note: on some themes adjoining borders automatically collapse into a single border, but on some themes they don’t (so you may end up with borders that are twice as thick as you specify). If you’re using such a theme, you write the opening table tag this way:
You might want borders around each cell, but with blank space around them; example:
| ROW1 COL1 CONTENT | ROW1 COL2 CONTENT | ROW1 COL3 CONTENT |
| ROW2 COL1 CONTENT | ROW2 COL2 CONTENT | ROW2 COL3 CONTENT |
| ROW3 COL1 CONTENT | ROW3 COL2 CONTENT | ROW3 COL3 CONTENT |
If you try this and it doesn’t work, it means the theme specifies collapsing. In that case you need this:
If you want a certain amount of space left & right, and a different amount above & below, you write two values instead of one (for instance, border-spacing:10px 24px;).
06. Vertical alignment of cell content
When cells in a row have content of varying height, you may need to adjust its default vertical positioning. The required property is vertical-align, and the usual values are top, middle or bottom.This is most commonly needed when a cell contains text and another cell on the same row contains an image. In that case the top of the image may be aligned with the bottom of the text (making the image seem almost as if it’s in its own row). To correct this, you need to specify the vertical alignment in all the opening td tags of the row, for example:
07. Horizontal alignment of cell content
As a rule, the content of each cell is left aligned by default. To change this, you need to specify one of the other options:Don’t be misled by the name of the property: centering or right-aligning the content this way will work for images as well.
Note: there’s also text-align:justify, but justified text is highly unlikely to work well in a table cell (except if you only have very few very wide columns). More often than not, it will produce ugly gaps between words.
08. Padding inside each cell
Padding is the space between some content and the (visible or invisible) box that surrounds it. You may need to change the padding in a table, because the default might be too little or too much, or unequal while you want it equal (or vv). Excessive default padding on some themes is often the reason why the content doesn’t show up the way you think it should.If you want the same amount of space around all four sides, you add one value; for example:
If you want a certain amount of space above and below the content, and a different amount of space left and right, you add two values; for example:
If you need a different amount of space on each one of the four sides of the content, you add four values; for example:
The four values apply clockwise from top.
You can also use three values (top, left&right, bottom).
For no padding at all, you replace the single value, or any of the multiple values, with a plain zero (without “px”).
09. Other styling inside each cell
The possibilities are too numerous to mention (you can find some of them in my posts on formatting text etc). One thing should be noted, however: amateurish instructions (including the slapdash WP doc on changing font color, size and font) may have taught you to use span tags for this purpose. As I’m pointing out in my Introduction to HTML as well as my posts on formatting text, this is correct only when you wish to change isolated characters, words or phrases inside a paragraph. If you wish to change the whole content of a cell, you don’t use span tags (or p tags or any other extra tag), you add the appropriate properties and values in the opening td tag, for example:Same way in an opening tr tag, if you wish to change the whole row, or in the opening table tag, if you wish to change the whole table.
10. Background color
To add bg color, you use the background-color property with the desired hex color code, for example:Same thing in an opening tr tag, to add bg color to the whole row, or in the opening table tag, to add bg color to the whole table.
You can also use it in a col tag (see section 4), to add bg color to a column. For example, to add bg color to the first column of a 3-column table, you can use this:
Some themes display tables with a colored bg by default (either for the whole table, or for every other row). If you’re using such a theme but you want no bg color, you need to write each opening td tag this way:
Or this way, if the theme displays borders as well and you don’t want those either:
11. Cells that span more than one column
To merge two or more cells horizontally, you use the colspan attribute:In this case, the row that contains such a cell will have fewer td tag pairs, of course.
For example:
Result:
| ROW1 COL1 CONTENT | ROW1 COL2 CONTENT | ROW1 COL3 CONTENT |
| ROW2 COL1 CONTENT | ROW2 COL2 CONTENT | ROW2 COL3 CONTENT |
| ROW3 COL1+COL2 CONTENT | ROW3 COL3 CONTENT | |
12. Cells that span more than one row
To merge two or more cells vertically, you use the rowspan attribute:In this case, the row(s) below the one in which the merged cell starts will have fewer td tag pairs, of course.
For example:
Result:
| ROW1 COL1 CONTENT | ROW1 COL2 CONTENT | ROW1 COL3 CONTENT |
| ROW2+ROW3 COL1 CONTENT | ROW2 COL2 CONTENT | ROW2 COL3 CONTENT |
| ROW3 COL2 CONTENT | ROW3 COL3 CONTENT |
13. Optional elements
A. The “caption” (that is, table title):This tag pair is placed right after the opening table tag. The so-called caption will show up above the whole table.
B. Headings:
They can be used in any row in place of td tag pairs. The default styling of the text will be different than the default styling in normal cells (usually bold and centered).
C. Header and footer sections:
These tag pairs are used to mark initial and ending sections that may have different default styling than the main table (tbody tag pair). The thead and tfoot tag pairs are both placed after the opening table tag (and after the caption and col tags, if you use these).
So the order, if you use all the optional elements, would be this:
14. Images
To insert an image in a table cell, don’t insert it in a post then copypaste the whole code from the “Text” editor: some of that code is unnecessary, and some of it won’t work. Upload the image to your blog, but simply copy the file URL and use the HTML coding for images, with the required attributes only:You can also add the appropriate class, if you need an image plus wrap-around text, or a centered image:
For a linking image, you enclose the image code in the code for links (second version will open in a new browser window or tab):
The width of the displayed version depends on the column width of the table. If the table has many columns, or if another column has a lot of text, the table may try to adapt by making the image column as narrow as possible. To display images in the relative width you prefer, you need to set the column widths yourself.
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean.
No comments:
Post a Comment