Formating tables with CSS

Almost all intranet applications described in section intranet tour on this web apply data formatting into the HTML table. In this article you can find some useful tips for table design: how to format fixed table size, how to set up a single cell borders, how to highlight a row in the table, how to cut long text in a cell appended by ellipsis mark (three dots). Following table example comes from application Service Reports.

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.		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.

Fixed-size tables are set by CSS property table-layout: fixed and at the same time setting the overall width of the table. The columns width are set by using elements col but the attribute width can not be used, it is optional, and browsers based on WebKit ignore that. We have to use inline style, as recommended under the W3C. Let the width of the last column calculate the browser.


<table style="table-layout: fixed; width: 580px;">
<col style="width: 36px;">
<col style="width: 70px;">
...
<col style="width:*">

<tr>
<th>req.</th>
<th>date from</th>
...
</table>

Another way of creating fixed table layout is to define the width of the columns in the first row of the table (usually in the elements th). The columns width are fixed after the first row of table is passed. Elements col can not be used in this case.

When determining the width of the column, box model is applied. WebKit browsers calculate the width of th according to the traditional box model (border-box), other browsers use the W3C box model (content-box). Therefore box model have to be unified (see the section of CSS, element th). This method of formatting the fixed table layout take effect only in modern browsers capable to process the CSS property of box-sizing.


<style type="text/css">
th {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box; 
 -ms-box-sizing: border-box;
 box-sizing: border-box;
}
</style>

<body>

<table style="table-layout: fixed; width: 580px;">
<tr>
<th style="width: 36px;">req.</th>
<th style="width: 70px;">date from</th>
...
</table>

</body>

Long text clipping

Text, which is longer than the cell width, browser wraps to multiple lines, long words (without any space) "overflow" outside of the cell in fixed formatted table. Often, it is satisfactory to see just the beginning of a very long text and wrapping to multiple lines is undesirable. In this case, the text should be clipped so as not to run out of the cell border and the visible part of text can be appended by one special character, which is renderd as three dots (ellipsis).

Table cell td has set up CSS property white-space: nowrap to prevent text wrapping into multiple lines, next property overflow: hidden makes remaining text invisible. The property text-overflow: ellipsis appends at the end of the visible part of text symbol ellipsis, to indicate that visible text is partial only. This property also ensures text clipping on the border of character.


td {white-space: nowrap; overflow: hidden;
 text-overflow: ellipsis;
 -o-text-overflow: ellipsis;
 -ms-text-overflow: ellipsis;
}

Cutting text and appending by ellipsis symbol succeeds in all modern browsers except for Firefox3, which has not implemented a property text-overflow. Firefox cuts the text at the end of the cell, regardless of the character border (clip inside of the letter). This method can be used for single line text only, it is not possible to add an ellipsis symbol in a multiline text by help of CSS. The same style of cutting text may be used for element div also, with the CSS properties above.

For the long text width restriction it is possible to use form element input type="text" with set up atribute 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 this type of use.

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.


table  {border: 0; border-left:  1px solid #aaa; border-top:    1px solid #aaa;}
td, th {border: 0; 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;
}

All borders of the table and the table cells are set to zero, then just the desired borders are set up to light gray, solid line style and 1 pixel width. For the table are set up top and left borders, for the cells right and bottom borders. The table headers th are filled with the background image, plus left and right borders are set up to create a pseudo 3D effect. Table attribute cellspacing="0", has to be set to zero, otherwise the grid is splitted.

Borders of empty cells are not displayed. Then the style table {empty-cells: show;} makes borders visible, except IE6 and IE7 which do not support this style. Therefore an empty cell have to be filled with no-break space character to get visible border of empty cell. Using of entity reference ( ) as no-break space code complicates copying the content of HTML table to Excel. Direct using of character with ASCII value 160 allow to copy data table and retain data types, but it is impossible to use the page charset utf-8 then.

Another way how to get 1 pixel table border is to set the table attribute cellspacing="1px" together with the background color of table. Individual cells of th and td are set to border: 0 and white background. You can also use the table property border-collapse: collapse; border: 1px. Then the border color is the same across the table.

If you need to set up different border colors, then the sequence of border rendering in different browser is notable. The picture shows a cell with colored borders of 1 pixel width, 6x magnified so as to see the flow of borders in different browsers. The last cell on the right of the image is regular size of cell, the width of border 6 pixels, and illustrates how the borders wider than 1 pixel are rendered.

Highlight one row in table.

You may have noticed a change the background color of table row when moving the mouse over the table example. This is a kind of pointer which simplify reading the rows on broad tables. To highlight the row over which the mouse is located is very simple in modern browsers, requires nothing more than following CSS code.


<style type="text/css">
tr:hover {background: #eef;}
</style>

To get the same effect in IE6, two CSS classes (.normRow and .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.


<style type="text/css">
.normRow {background: #fff;}
.cursRow {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>

Copy the content of HTML table

Sometimes it is required to transfer content of the web table to Excel sheet to make specific calculation, or to create a graph for presentation. It's easy done by copy&paste. Mark the content of the table and copy to the clipboard, switch to Excel and insert by context menu or by Ctrl+V. But remember, this is only possible with IE and Opera browsers, which retain data separation to the cells, other browsers put the content of entire table into one cells. This is useful namely on the intranet where process, technological, or laboratory data are displayed as web tables.

updated 20.08.2010