Have you ever wanted to present some data in a table format in your wordpress document, but you’re not an HTML whiz-kid? The free version of WP doesn’t have a widget to help you create a table, so that means you’ll need to use HTML code to create that table. Let’s see if I can simplify for you how you can do that within the HTML window to create the framework for your table. Once the framework is built, you can return to the VISUAL window to fill in the data.
HTML uses what I’ll call START and END tags. You’ll need to ‘wrap’ your table between <table> and </table> tags. Within those tags, you need to start the body of your table with a <tbody> tag and end the body of your table with a </tbody> tag.
<table>
<tbody>
this is where you’ll put all your rows of columns (we’ll talk about codes for that next)
</tbody>
</table>
Now that you’ve got that set up, you’ll create your rows and the columns within those rows. If you were using a word-processor to create a table, you’d start a row within the table by typing something to be displayed in column 1, then tab to where column 2 would begin, type something, and then tab to where column 3 would begin, and type something, etc. HTML uses START <tr> and END </tr> tags to identify where each ROW begins and ends. Between <tbody> and </tbody> tags you’ll create START <td> and END </td> tags to identify where data for each column within that row starts and ends. For example, let’s say we want to create a ROW that has 3 columns of data. Here’s what that framework would look like:
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
The <tr> and </tr> tags start and end the row. The <td> and </td> tag starts and ends a column within that row. If you want to create more rows, just repeat that structure. For example, let’s say you want to create a table that has four rows and three columns. This is what the HTML code would look like for that simple table:
<table>
<tbody><tr>
<td> </td>
<td> </td>
<td> </td>
</tr><tr>
<td> </td>
<td> </td>
<td> </td>
</tr><tr>
<td> </td>
<td> </td>
<td> </td>
</tr><tr>
<td> </td>
<td> </td>
<td> </td>
</tr></tbody>
</table>
The framework above will create a table that has four rows with three columns. If you need more rows or more columns, just increase the number of row tags and/or column tags in your framework.
……… ……… ……… ….. ….. ….. ….. ….. ….. ….. ….. …..
Once you click on the VISUAL tab and begin typing data in the table cells, the cells will adjust themselves to accommodate the data you’re typing into the cells. You may not want the automatic adjustments to the overall table width or the column widths. You may instead want to fix the width of the columns and force the data to word-wrap within the various column cells.
SETTING OVERALL <TABLE> ATTRIBUTES
If you want the table to be a fixed or flexible width on the screen, you’ll need to add an attribute to the <table> tag:
- The syntax of the table width attribute is <table width=”value“>
Value Description pixels Sets the width in pixels (example: width=”50″) % Sets the width in percent of the surrounding element (example: width=”50%”)
If you want the table to have or not have a border, you’ll need to set a border attribute within the <table> tag:
- The syntax of the table border attribute is <table border=”value“>
Value Description pixels Specifies the border width as a number
If you need to provide some space between the cell wall border and the cell content, you might want to create some ‘cell padding.’
- The syntax of the cell padding attribute is <table border=”value“>
Value Description pixels The space between the cell wall and the cell content
SETTING INDIVIDUAL TABLE CELL ATTRIBUTES
You can also modify data within the column-rows. You can modify the column width, vertical alignment of the data and the horizontal alignment by modifying the attributes of the <td> tag.
- The syntax of the column width attribute is <td width=“value”>. The value attribute can be any number of pixels or a percentage of screen width (and needs to be enclosed in parentheses). Plus, to simplify things, you technically only need to include the width attribute definitions in the first row of the table. All rows that follow the first row will use the same widths as are defined in the first row of the table.
- The syntax of the table cell horizontal alignment is <td align=”value“>.
Value Description left Left-align content (default for td elements) right Right-align content center Center-align content justify Stretches the lines so that each line has equal width (like in newspapers and magazines) char Align the content to a specific character - The syntax of the table cell vertical alignment is <td valign=”value“>.
Value Description top Top-align content middle Center-align content bottom Bottom-align content baseline The baseline is the “imaginary line” which most letters “sit” on, in a line of text. The baseline value sets the row so that all the table data share the same baseline. Often this has the same effect as the bottom value. However, if the fonts are in different sizes, baseline looks better. Look at the illustration below
So, let’s take a look at how we might want to create a 3-row, 3-column table with equal widths of 125 pixels and cell padding of 2 pixels, with table cells that are top-aligned.
<table width=”98%” border=”0″ cellpadding=”2″>
<tbody>
<tr>
<td valign=”top” width=”125″></td>
<td valign=”top” width=”125″></td>
<td valign=”top” width=”125″></td>
</tr>
<tr>
<td valign=”top”></td>
<td valign=”top”></td>
<td valign=”top”></td>
</tr>
<tr>
<td valign=”top”></td>
<td valign=”top”></td>
<td valign=”top”></td>
</tr>
</tbody>
</table>
Once that HTML-Table code is created or pasted into the HTML pane, all that remains is to add the actual data in each of the table cells. Adding that data, however, can be done from the VISUAL pane.
Hope this post helps you create a table the next time you need one.