site logo

Formating tables with CSS

Practically all intranet applications described on this web apply data formatting into the HTML table. In this article I want to demonstrate some useful tips for working with table. It is not about tables for page layout, tables really do not fit for this purpose. On the contrary, tables are useful for database data presentation.

Following table example comes from application Service Reports. With help of this example I am going to describe basic principles of fixed size table setting, cells width, cells border and row cursor.

req. date from description applicant deadline status
4266 11.5.2006
Please about repairs ladies' WC downstairs admin. building. Thanks.
 Chytilova 12.5.2006 done
4265 4.5.2006
Request for repair strapping machine.
 Valek 18.5.2006 working
4264 4.5.2006
Ask for exchange of water supply battery in kitchenette.
 Camfrla 10.5.2006 done
4263 3.5.2006
Reparation fire-stopping security door in corridor.
 Benedikova 17.5.2006 working
4262 27.4.2006
Air condition in delivery boardroom maintenance.
 Manak 11.5.2006 done

Fixed table size

The width of table and single columns is not essential when isolated tables are rendered. When database is browsed in paging style, each page sets the columns width according to actual length of text, and result is "jumping" table. Let's try to set fixed width of table and columns so that, when paging, table and columns stay on it's place and only content of cells are changed. In addition let's try to setup identical table size in all current browsers.

For the width of columns setting would have be used tags col and colgroup. Unfortunately, IE adds width of border to width of col, and that does even in standard mode. The column width and entire table too, then will be greater in IE than in FF and Opera. Therefore, I use the columns width definition right in the first line of table code, in the head line. In order to apply pre-set column width of table, style table-layout: fixed; have to be set. When the first table row is parsed, columns width are fixed and such a table in current browsers is displayed identically. 


<style type="text/css">
table {
  table-layout: fixed;
}
div.CUT {
  margin: 0; padding: 0; width: 248px; text-align: left; 
  overflow: hidden; white-space: nowrap;
}
/* th, td  {                --- IE only ---                         */
/*  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; */
/* }                                                                */
</style>

<body>

<table cellspacing="0" cellpadding="0" border="0">
<tr>
<th style="width: 36px; border-left: 0;">obj.</th>
<th style="width: 70px;">ze dne</th>
<th style="width:251px;">description</th>
...
</tr>
<tr>
<td class="tdR">4266</td>
<td class="tdR">11.5.2006</td>
<td class="tdL"><div class="CUT">Please about repairs ladies'...</div></td>
...
</table>

</body>

Long text clipping

The best prepared, accurate fixed size table does not help, when text longer than the cell width is placed into cell. Then width, or high of cell enlarges so that, to accomodate entire text. For numbers and dates it is possible to determine needed cell width in advance, in case of general text it is not possible and such text have to be clipped.

So as to get all purpose cut off text solving, element div is placed into table cell td. This div element makes use of class .CUT with CSS properties which assure text cut off. Property width have to be smaller or equal to the cell width minus its padding. Property overflow: hidden; hides overrunning text, white-space: nowrap; prevents word wrapping to the lines. In above table example this cutting off text method is used in column named description.

Cut off text is very nicely resolved in IE (see commented part of CSS code listing). Needed CSS properties are set up directly for table tags th, td and auxiliary tag div can be left out then. Along with CSS3 property text-overflow: ellipsis; and in combination with text clipping, this solution displays three dots at the end of cutted off text indicating, that text continues. In addition, cut off is done on the border of letter. This looks very naturally.

Similar result is possible in Opera also, but vendor prefix -o-text-overflow: ellipsis; have to be used. That is far from ideal solution. Browser error console will complain of CSS error of other browser code. Following live example displays cutted text in your actual browser.

Long text cutting example with ellipsis character. O.K. in IE, Opera and Safari. In FF text is clipped, but ellipsis is missing. 

<div style="width: 580px; border: 1px solid #aaa; background: #fff;
 overflow: hidden; white-space: nowrap;
 text-overflow: ellipsis; -o-text-overflow: ellipsis;"
>
Long text cutting example with ellipsis character.
O.K. in IE, Opera and Safari. In FF text is clipped, but ellipsis is missing.
</div>

For the width restriction of long text it is possible to use form element input type="text" with set atribut readonly, which is placed into table cell and has set up desired property width. Advantage is the possibility to display hidden part of text by moving with help of cursor keys. But form elements are not designed for of such a using and this way does not seem to me proper.

Table borders

The best table borders are no borders. Not all your users have to agree with this idea and sometimes you need to create table with borders. You can try thin, light cell borders, as it is used in table example. 


<style type="text/css">
table {
  border: 0;
  border-left: 1px solid #aaa;
  border-top:  1px solid #aaa;
}
th, .tdL, .tdR {
  text-align: center;
  border-right:  1px solid #aaa;
  border-bottom: 1px solid #aaa;
}
th {
  background: url(/at/files/bg_table.png);
  border-left:  1px solid #cff;
  border-right: 1px solid #358;
}
.tdL {text-align:  left; padding-left:  4px;}
.tdR {text-align: right; padding-right: 4px;}
}
</style>

At first all table and cells borders are set to zero, then only required borders are set up to width of 1 pixel. For table only left and top borders are set. For each cell only right and bottom borders are set. Table head cells th  here, are filled in with background picture. For table body cells td  two CSS classes are defined: .tdL  for text alignment to the left and .tdR  for alignment numbers and dates to the right. Take care on table attribute cellspacing="0", that must be to zero, otherwise borders do not meet.

border rendering

In picture is zoomed table cell with colored border width of 1 pixel in magnification 6x, to illustrate border drawing in different browser. When playing with described type of borders, picture may help to understand some differences in various browsers. Last part of picture (no zoom) is cell with border 6 pixels, in natural size, and is here just for illustration how wider borders are rendered.

Other way how to get border of width 1 pixel arround cells is to set table attribute cellspacing="1px" and at the same time to set grey background of table. Table cells th and td have set up attribute border="0" and white background colour. Rendering of such table is a bit slower. This type of table border is used in next article for form design.

Row cursor.

Perhaps you noted changes of table rows background color when moving mouse over table example. It is very useful aid for wide tables. Row cursor implementation in browsers IE7, FF, Opera is very primitive, no more than definition in CSS section: tr:hover {background: #...} is required. 


<style type="text/css">
.normRow {background: #fff;}
.cursRow {background: #eef;}
/* tr:hover {background: #eef;} */
</style>

<script type="text/javascript">
function rowOn(row) {
  row.className="cursRow";
}
function rowOff(row) {
  row.className="normRow";
}
</script>

<body>

<table>
<tr onmouseover="rowOn(this)" onmouseout="rowOff(this)">
<td class="tdR">4266</td>
...
</tr>
...
</table>

</body>

To get the same effect in IE6, two CSS classes (.normRow a .cursRow ) and two javascript functions are needed. In each table row two mouse events onmouseover and onmouseout  are linked, as it is in code listing.

updated 8.02.2007