Basics, Tips And Tricks
Tables are a common addition to a web site. They can be used for more things than just displaying spreadsheets or organizing tabular data. A table can be used to create a certain look or presentation to a web page. They can be used to create a certain format for text, to show the separation of topics within a subject and even, show off your latest picks for this seasons Football picks. You can even have tables embedded inside other tables.
A number of the posts here in the HTML Tutorial, use tables to section out the information for a particular tag, or part of a tag with the instructional text that describe how it works. But tables can also be extraordinarily frustrating. Especially if you’re using them on a blog.
If you’re creating a webpage, they work really well and can help you present your text in a neat organized fashion. They can do that too on a blog, but how your theme works with tables can interfere with some of your table parameters. So knowing the code behind the table can minimize hours of frustration! But you’ll also have to know how your theme is configured for table usage, in case you need to change something.
So let’s get started.
Like many other HTML Tags, Tables can be coded in two ways. The old Web 1.0 version is simple and both the commands and parameters are easy to remember. Most of them will still work on Blog posts too. But Blog editors have a tendency to automatically update the tags to Web 2.0. HTML – Web 1.0 vs Web 2.0
The Table Tag & Parameters
| <table> <tr> <th> </th> <td> </td> </tr> </table> |
Table Basics A table is made up of 4 parts.
You can also find a tag in Web 2.0 code. I never use this, but editors often add it to the table code. Like an HTML page, a table can have a header section and a body section. They also have a table footer section. The parameters within TBody are not supported by HTML5, but you can read more about them from Wc3Schools – TBody. |
|||||
|
The Table Tag The table to the left is a simple 1 cell table with a border and centered text. To create this simple table, here’s what you need. . Each one of these Tags has it’s own set of parameters to set width, height and text alignment. . To create this table, you can use the very minimum basics for defining a table. . <TABLE WIDTH=”125″ BORDER=”1″> <TR><TD ALIGN=”CENTER”> A Table Cell</TD></TR> </TABLE> |
|||||
|
Table Tag Paremeters Within the <Table> tag, you have several parameters to utilize. The table to the left is exactly like the one above, but I’ve added cellpadding=”4″ in the table tag.
|
|||||
|
Table Border Color You can also set the border color of your table by adding the Bordercolor parameter. The attribute works like all the other ‘color’ attributes in HTML, just choose your color and insert the proper color code. This parameter may not work on blog posts, but it does still work on standard HTML sites. . Here in the table to the left, I use the <TD> tag to define the table header. It looks like the previous table . <table border=”2″ cellspacing=”2″ cellpadding=”3″ BORDERCOLOR=”#800000″> <tr><td align=”center” bgcolor=”#3d3d7a”>ffffff;”>Table Borders</td></tr> <tr><td align=”center”>Table Cell</td></tr> </table> |
|||||
|
Table Headers This table utilized the table header tag. To be honest, I don’t use this tag. I find I can control the look of the header rows to my satisfaction by using the tag with additional parameters. . The <TH> tag automatically tells the browser to center and bold the text within the cell. It will also make the header text larger than the rest of the table. That’s the part I don’t care for. . The table to the left has been created with this code: <table width=”125″ border=”1″ cellspacing=”2″ cellpadding=”4″> <tr><th align=”center”>Table Header</th></tr> <tr><td align=”center”>Table Cell</td></tr> </table> |
|||||
|
Table Headers by <TD> I much prefer to create the header rows by using the tag and it’s parameters. The only difference using and in this method, is that the font size is not increased in the Header cell. You can set the background color within by using the same parameter utilized within the tag. . The table to the left was created with the following code. . <table width=”125″ border=”1″ cellspacing=”2″ cellpadding=”4″> bgcolor=”#ffebf2” align=”center”> Table Header</td></tr> <tr><td align=”center”>Table Cell</td></tr> </table> |
|||||
|
Adding Table Columns Between the <TR> tags you can have multiple <TD> </TD> tags to create columns within your table. . If you want more than one column, you must make sure you have the same number of <TD></TD> tags in each row of your table, or you’ll get mismatched tables. . The table to the left obviously contains two columns and two rows. This is created with the following code: . <table border=”1″ cellspacing=”2″ cellpadding=”3″> <tr> <td align=”center” bgcolor=”#ffebf2“>#</td> <td align=”center” bgcolor=”#ffebf2″>Column Header</td> </tr> <tr><td>1</td> <td>Making Columns Work For You.</td> </tr> </table> |
|||||
|
Table Data Cell Parameters Within the <TD> tag you can have several parameters to control alignment, along with column and row span options.
But what if you want to span columns to create a single header row. Or to span rows to create a category with multiple definitions. This is accomplished with the span parameters.
This is created with the following code: |
|||||
|
Nesting Tables Placing a table inside a table can help you further format your text within your page. To nest a table, you simply place the same tags described here inside a single table data cell. . This method of nested tables is what I’ve used to help format the text within these Tips & Tricks pages. The tables in the left column are nested into the left column of a table. . To make it simple: <Table><tr><td>Outer Table</td></tr> <tr><td> <table><tr><td rowspan=”2″>Inner Table</td><td>1st row</td></tr> <tr><td>2nd row</td></tr> </table> </td></tr></table> |
|||||
.
Table Over Use & Disadvantages
Tables can be great tools, but they can also be over used. One of the biggest disadvantages to using a lot of tables is the amount of time a browser spends trying to load it for your visitors. A clean table, that’s a table without a lot of extra code, can load fairly quickly. But a table with extra HTML tags can take longer, and can even hangup some browsers.
If you’re using native HTML to create a table, you can generate the desired result with the least required HTML commands, because you are controlling the code. But if you’re using any of the new HTML Editors, by default they will add tags, whether you actually need them or not. The browser will then be forced to “read” each tag, even if it’s not necessary for the data you’re displaying. The browser still has to read each tag inside each individual cell. This is where the problem with loading time occurs.
Make sure you’re using tables to add functionality to your page for a reason. If you don’t really them, it’s best not to use them. You can often accomplish the same structure or organization of your text by using indentation vs columns and rows within a table.
Using Tables Within A Blog
Blog Themes define how tables are to be used and displayed to your visitors. In some cases, that theme code can override table code you define in a post. The main culprit I’ve run into for this, is the vertical alignment. You can define your code to say you want the text within the data cell to be vertically aligned to the top, but the theme can over ride the code and ignore the parameter.
The Bouquet theme by Automattic is one such theme that does this. But there are others. It’s not an error, it’s merely one alternative way of handling tables.
To make the vertical alignment work properly in themes like this, check your theme style sheet. To do this:
- Go to your Dashboard
- Select the Appearance category in the side menu.
- Click on the “Editor” option
- You should go straight to the theme’s Style Sheet. Look in the top corner and make sure the name of the open file is: style.css
- Place your cursor inside the file window and press the Cntl + F keys to open the find menu bar. Type in this line: vertical-align: baseline;
- You’ll need to comment out this line. Add /* before the line and */ after it.
Like this: /*vertical-align: baseline;*/ - Save the file and check the alignment of your table in your blog display.
Blog Table Tricks
Blog editors, from what I can tell, won’t try to interpret your code and add parameters. In part because blog editors don’t seem to recognize tables as a feature you might want to use in a blog post. So if you want a table within your blog, you’ll have to code it from scratch. Or find a table you can cut and paste into the TEXT tab where you want the table to go.
I have a file on my pc that has the table code I use most often. I copy it from the file and paste it into the blog post where I want the table to reside, within the Text tab. Once it’s pasted, I switch back to Visual and enter the data in the cells as I desire. If I need more than one row, or more than one column, I’ll copy and paste the necessary row or cell code in the source before I start entering data. It’s easier for me.
If you’d like a template example here you go. Keep in mind there are two versions here. One that displays the borders and one that doesn’t.
Set A Table With a Border
<table width=”100%” border=”1″>
<tr>
<td style=”text-align: center; valign=”top” width=”50%”><span style=”color: #6d0d26;”>ss</span></td>
<td style=”text-align: center; width=”50%” valign=”top”><span style=”color: #6d0d26;”>ss</span></td>
</tr>
</table>
Set back ground color for a row:
<td style=”border: none;” text-align: center; width=”50%” valign=”top” bgcolor=”#CF8C9E”> Text </td>
Set Table with No Border:
<table style=”border: none;” width=”100%”>
<tr>
<td style=”border: none;” text-align: center; width=”50%” valign=”top”> Text </td>
<td style=”border: none;” text-align: center; width=”50%” valign=”top”> Text </td>
</tr></table>
Problems With Text Spacing In Blog Tables
Yeah I’ve had that one to. You create your table on a blog post, type everything in the way you want it, but when you publish the post the pagination within the table goes away. What happened?! Is it me, the theme, or the wordpress blog itself?
Frankly I’m still trying to find out why it works sometimes and doesn’t work others. I’ve researched off and on for the past 4 years and I can find a lot of people saying they have the same problem, but no one has a reason or a fix for the problem. If you’re not sure what I’m talking about it looks like this:
| I can type my text here on this side of the table and it looks perfectly fine. . I have my carrier return, between lines and paragraphs to make my writing easier to read. And to explain the issue from a visual perspective. So you’ll see three paragraphs here on this side of the table. . But sometimes when you publish a post on WordPress, the carrier return, also called a hard return, will disappear and the text will run together. |
This is the problem: I can type my text here on this side of the table and it looks perfectly fine. I have my carrier return, between lines and paragraphs to make my writing easier to read. And to explain the issue from a visual perspective. So you’ll see three paragraphs here on this side of the table. But sometimes when you publish a post on WordPress, the carrier return, also called a hard return, will disappear and the text will run together. |
It’s truly frustrating not being able to find an answer to this strange little problem. If anyone comes this way and knows the issue, please leave a comment and share! Because I’d love to know what the solution is.
In the meantime, here’s a little trick I use to get around this problem using tables on my WordPress blogs.
| When I want to force a line space between paragraphs, I single space the text, by using Cntl+Enter. . Then I add a period, where I want the blank line, like the one above, and hit the Cntl+Enter again to start the next paragraph. . Now you don’t want the “dot” to show up to your visitors, so the trick is, knowing what the color of you post background is. For my blog the Hex color is “#ffebf2”. . Highlight the dot, and set the text color for that character to the same color of your post background. Now the “dot” is invisible, like the column on the right. |
When I want to force a line space between paragraphs, I single space the text, by using Cntl+Enter. . Then I add a period, where I want the blank line, like the one above, and hit the Cntl+Enter again to start the next paragraph. . Now you don’t want the “dot” to show up to your visitors, so the trick is, knowing what the color of you post background is. For my blog the Hex color is “#ffebf2”. . Highlight the dot, and set the text color for that character to the same color of your post background. Now the “dot” is invisible. |
Good Luck using tables.
.
© 1997-2014 Springwolf, D.D., Ph.D., Springwolf’s Kosmos. All Rights Reserved.