CSS Tips: Putting a space above and below a table row / line break into a table cell using CSS

Regardless if best practice coding calls for the use of “tableless” tables and CSS, the reality of working with HTML pages is that you will often have to deal with tables in your HTML. Here are two little tips for using tables that might help you.

Inserting padding above and below a table row

If you have a table and want to put a line break or some padding around the rows (for example if it’s a product list in oscommerce or a features list of your product on a Joomla site’s article page), then how do you?

The trick is to take advantage of the css operator that looks like a greater than sign (“>”) which tells the browser to apply a style to all of the html elements that sit directly underneath the one that the style is applied to. That is, the children of the parent element.

Here’s how it is done:

First, set up a class with whatever name you want (e.g. “myrow”), create an HTML table and add the class “myrow” to the HTML for that row.

<tr class=”myrow”>

Next, put this css into your stylesheet:

tr.myrow > td {
padding-top:5px; padding-bottom: 5px;
}

That’s it! You’ve put a 5px gap above and below

Here is an example:

Before:

After: (for the purposes of illustration we will put a 25 pixel gap over and under each row element, instead of 5.

Note: you can easily modify your HTML to do this by doing a find and replace on <tr> with
<tr class=”myrow”>

Putting in a line break without using a br tag

Let’s say you had a product image and a caption inside a table cell and you were pasting a whole lot in from a third party. If you wanted to make sure sure that the description of each one was underneath the image in the cell without editing every cell and inserting a br tag, how could you do it?

There are three parts to this:

First, use the greater than (>) sign in your CSS To refer to the children of the row in the table (the td)

Second, assign a “clear right” css tag to any image in the cells of the table – so that the element underneath each image (the caption) is hard aligned to the left of the container (which is the table cell).

The first two bits alone will not complete the job. You also need to ensure that your caption has a display:block tag attached to it, so that the “clear” works.

Here’s how to do it in summary: give your table a class name (e.g. “mytable”) and then use this css:

#mytable tr > td img { display: block; clear: right; }

Here is an example:

Before:

Web Hosting for Australian Business

After:

Web Hosting for Australian business

Related posts:

1. Mobile business: international trends and tips
2. Shopping Cart Tips: Changing the order number