Are CSS Tables Better Than HTML Tables?

by Steven Bradley on October 13, 2011 Archived in CSS You are here: Home / Blog / CSS / Are CSS Tables Better Than HTML Tables? Mention css and tables in the same sentence and controversy is sure to follow. Web designers like myself have been telling you not to use html tables for layouts and now here we have a way to create tables with css alone. Whats the difference between html tables and css tables? Should we use css tables? If so how? Once again I want to thank Pedro for emailing me the idea to talk about css tables. I hope I cover what youre interested in knowing. Lets get to the how of css tables first and then tackle the question of whether or not youd want to use them in practice.

How to Create CSS Tables

The css table model is based on the html4 table model and has pretty good browser support. In both table models the table structure parallels the visual display of the table itself. Rows are primary. The row is specified explicitly and columns are derived from how the rows and cells are set up.

Im sure youve worked with html tables before and if you have you shouldnt have any problem creating css tables. Each html table element has an equivalent css display value. The only real difference is that theres no distinction between td and th with the css variety. Below are the html table elements and their corresponding css display value.
1 2 3 4 5 6 7 8 9 table tr thead tbody tfoot col colgroup td, th caption { { { { { { { { { display: display: display: display: display: display: display: display: display: table } table-row } table-header-group } table-row-group } table-footer-group } table-column } table-column-group } table-cell } table-caption }

Captions can be positioned above or below the table with the caption-side property
1 #caption {caption-side: top} 2 #caption {caption-side: bottom}

Looking at the above it shouldnt be too hard to figure out how to set up a css table. Heres a simple example.
1 <div id="table"> 2 <div class="row"> 3 <span class="cell"></span> 4 <span class="cell"></span> 5 <span class="cell"></span> 6 </div> 7 <div class="row"> 8 <span class="cell"></span> 9 <span class="cell"></span> 10 <span class="cell"></span> 11 </div> 12 <div class="row"> 13 <span class="cell"></span> 14 <span class="cell"></span> 15 <span class="cell"></span> 16 </div> 17 </div> #table {display: table;} 1 .row {display: table-row;} 2 .cell {display: table3 cell;}

If you look only at the html above you can easily see the basic table structure except that Ive used div and span with ids and classes instead of table, tr, and td.

A relatively small amount of css then presents the divs and spans as the familiar table, table row, and table cell. In addition to the above the css table model includes an inline-table value, which defines a new table the same as display: table, but does so according to the inline formatting context.

Columns and Column-Groups

While tables cells are always descendants of table rows it makes sense to set some properties on columns. The css table model allows for the following on columns and column-groups

border The usual properties as long as border-collapse has been set to collapse on the table element background The usual properties as long as both row and cell have background set to transparent width Sets a max-width on the column visibility If set to collapse (the only available value) then column cells dont display, cells spanning into other columns are clipped, and width of the table is adjusted

CSS Table Stacking Context

Different table elements have different stacking contexts for the purpose of adding backgrounds to these different layers. These layers can be seen in the image below. 1. table lowest layer 2. column group 3. columns

4. row group 5. rows 6. cells highest layer The background of any layer will only be seen if all the layers above it have backgrounds set to transparent. This can be a nice way to show an empty cell is truly empty by having its background be transparent and letting the background of the row, column, or table show through.

Table Layout Algorithm

The width of css tables can be calculated using one of two algorithms. This can be controlled through the table-layout property and the 2 values below.

fixed The width of the layout is not determined by its content, but rather by the widths set on the table, cells, borders, and/or cell spacing auto The width of table is set by width of columns and borders

The important thing to consider is that a fixed table-layout is a one-pass calculation and very quick. On the other hand auto requires the same multiple passes of html tables. Its also the default value. If you explicitly set a width on the table then the fixed table layout algorithm will be used.

By default the cell height will be the minimum necessary to display the contents of the cell, but you can also explicitly set heights. All cells in a row will be the height of the cell with the maximum minimum necessary height. The vertical-align property of each table cell determines the cells alignment within the row

baseline top bottom middle sub, super, text-top, text-bottom, <length>, <percentage>

The last group of values do not apply to cells, but the text within the cells. The cell is aligned at the baseline instead.

CSS Table Borders

There are 3 interesting properties for table borders

border-collapse values can be collapse, separate, or inherit border-spacing values can be <length> (horizontal), <length> (vertical), or inherit. border-spacing is the distance between cell borders. empty-cells values can be show, hide, or inherit. If cells are empty or set to visibility: hidden content doesnt show by default. Setting empty-cells: show on the table will cause backgrounds and borders to display for the empty cell.

Should You Use CSS Tables?

Are css tables better than html tables? If so what advantages do they have and if not why should we use them at all? Good questions that I dont have great answers for. I can say Ive never used a css table in practice and have no intention of using them any time soon. If a page calls for tabular content it strikes me than an html table is called for and I think we have and will have better techniques for site layout than css tables. I took a look at an older post I wrote on css vs tables to remind myself of the cons for using html tables for layout over a combination of divs and css.

Extra code html tables require more structural code than divs, but css tables use just as much. If anything css tables use more since ids and classes will likely be added. If html tables use too much code then css tables do too. Rigid structure html tables are source dependent. The order you structure the cells is the same order in which theyll display. The same is essentially true of css tables as well. Browser rendering browsers require multiple passes at the structure of html tables. They should only require one pass to display a css table if the table-layout is set to fixed. Theyll require the same multiple passes if set to auto.

Considering the above css tables arent offering enough benefit over html tables to use them for layout. We could reach and suggest that since the css can be easily changed a css table is less rigid than an html table, but in practice I think theyre going to be just as rigid. CSS tables do have the advantage of being more semantically correct as we can choose html elements that better describe our content. Overall its hard for me to see much improvement in css tables over html tables, some perhaps, but not enough to justify to myself using them. I think some of the other css layout modules on the horizon will be better and even our current practice of using floats and positioning for layout are still a better option. At the same time I cant say Ive worked much with css tables. This post is the most time Ive spend with them since theyve been introduced and Im open to someone elses reasons for why we should use them. I have a hunch theyll remain in use to solve some specific problems like vertically centering content or cleverly switching the display order of different elements in a responsive design. They may also prove to be a good pattern for navigation. I dont see them being a viable solution to the problem of layouts though.

Summary
CSS tables are pretty simple to understand and use. Its mostly a matter of remembering the corresponding css display property values for the basic html table elements. table becomes display: table. td becomes display: table-cell, etc. There are some nice features of css tables like the ability to collapse one or more columns through the visibility: collapse property and they can be used as solutions to some specific problems. However they dont provide enough advantage for me over html tables when it comes to layout. Their advantages seem minor and a bit of a reach. Ultimately I think we have better layout solutions than both html and css tables.

How to Create Beautiful and Elegant HTML Lists Using CSS

HTML list have become one of the most used HTML elements for marking-up various semantic content structures navigation, comments and even image galleries. This article will explain and show you how to style lists inside blog posts, articles or other basic HTML documents. Before we start, it is necessary to understand the importance of using specific HTML tags <ul> and <ol>, instead of simple numbering (like 1., 2. or , ) for building lists. By applying content a semantic structure, we emphasize the relationships between different content elements. In case of lists we are able to imply that there is a certain relationship between all of the list members, which is possibly described by the paragraph introducing the list. It also helps screen reader users for whom the total number of items is announced before the rest of the list.

Default list rendering in standards aware browsers and Internet Explorer

Lets look at the default rendering of ordered <ol> and unordered <ul> lists by Web standards aware browsers (with Gecko, Webkit or Opera rendering engine) and Internet Explorer (IE).

It turns out that IE applies default left side margin to the list container (<ul> and <ol>) while standards aware browsers apply left side padding. These differences in list rendering force us to set both padding and margin of <ul> to 0 and continue to work only with styling <li> tag. Another thing we notice is that list bullets or numbering becomes invisible in IE with the left side margin set to 0.

Getting the list rendering consistent among all browsers

To solve the invisible bullet problem described above, its a good idea to use relative positioning of list containers <ul> and <ol>. By doing so, we will be able to create much more advanced list style later without repeating most of the CSS.
CSS for simple lists
ul, ol { margin:auto -3em 1em 0; padding:0; position:relative; left:-3em; overflow:hidden; } li { margin-top:0.25em; margin-bottom:0.25em; } ul ul, ul ol, ol ol, ol ul { margin-left:1em; padding-left:0; } ul li, ol li { margin-left:5em; } li li { margin-left:1em; }

Internet Explorer specific CSS

To fix IEs ability to do the math correctly, we have to enable hasLayout property for all of our <ul> and <ol> tags. This is done by using conditional comments:
ul, ol { height:0; overflow:visible; } ul, ol { height:1%; }

Output

List is now rendered equally in all browsers. For illustration purposes a yellow background is applied to the list container <ul>, gray border shows the dimensions of <ul>, while list items <li> have gray background.

Flat lists for more content per list item

Sometimes you have multiple lines of content per list item and then it might be reasonable to align the lists with the rest of the content in order to sustain the vertical flow of it.
CSS for flat lists
.flat li { margin-left:3em; } .flat li ul, .flat li ol { margin-left:1em; padding-left:0; } .flat li li { margin-left:0; }

Notice the little amount of CSS, but more importantly that it is rendered equally among all of the browsers and we can still use the default bullet styles instead of images.

However, sometimes one might want to use custom style list bullets. This can be done using the list-style-image property in CSS.
Lists with custom style bullets

Note: dont forget to remove the line break after list-style-image: to get it working.
CSS:
ul.bullet-a li { list-style-image: url('bullet-image-a.png'); } ul.bullet-b li { list-style-image: url('bullet-image-b.png'); }

Although the alignment of the list image is not pixel perfect among all of the browsers, it is more than satisfactory if the height of the bullet image doesnt exceed 10 pixels. One might suggest to use background of <li> tag as a list bullet image, but this would brake the ability to combine

multiple CSS identifiers per list, like <ul class="flat bullet-a"> because of inherited margin settings.

All the small details

Notice that the spacing between list items in the last example (rounded image bullets) is larger than the default one (arrow image bullets). This enhances readability and separates list items similarly to paragraphs. So here is the final set of CSS styles to suite most of the needs:
.spaced { margin-bottom:0; } .spaced ul, .spaced ol { margin-top:1em; } .spaced li { margin-bottom:1em; } .indent li { padding-left:1em; text-indent:-1em; } .inside li { list-style-position:inside; } .clear li { list-style-type:none; }

You can see that one of the previous examples already utilizes the spaced styling, while indent, inside and clear might benefit from a few examples:

All of CSS combined & list style cheat-sheet

View all of the list style examples in your browser. View the resulting CSS as a seperate file (bullet images: ) Download a list style CSS classname cheat-sheet (.pdf) which you can print and use as a reference when composing your articles, blog posts or other HTML documents.

Screenshot showing the use of various HTML list styles

Internet Explorer specific HTML and CSS

ul, ol { height:0; overflow:visible; } ul, ol { height:1%; }

Few suggestions:

Bullet image height preferably should not exceed 10 pixels. Lower image height makes them look better in Internet Explorer. If you want bullet images to be transparent, save them as transparent GIF or 8-bit PNG files. You might find it useful to apply this styling only to your post content, which can be easily done by prepeding the identifier of your post wrapper (like .post or .article) to all of the list styles. The end result would be something like .post ul, .post ol {}.

Default list formating

List item one Another list item Next in here The final item

1. List item one 2. Another list item

3. Next in here 4. The final item

Default list formating (visually)

List item one Another list item Next in here The final item List item one Another list item Next in here The final item

1. 2. 3. 4.

Where is the list's margin and padding?

ul { padding-left:40px; }

List item one Another list item Next in here The final item

ul { padding-left:0; }

List item one Another list item Next in here The final item

ul { padding:1em 0; }

List item one Another list item Next in here The final item

ul { padding:0; }

List item one Another list item Next in here The final item

ul { margin-left:40px; }

List item one Another list item Next in here The final item

ul { margin-left:0; }

List item one Another list item Next in here The final item

ul { margin:1em 0; }

List item one Another list item Next in here The final item

ul { margin:0; }

List item one Another list item Next in here The final item

Getting it consistent among browsers

Notice: All of the following examples use an additional CSS identifier ul.normal and ol.normal, which for you should be simply ul and ol.

CSS:
/* Used by IE7, but wont't harm anybody else. */ body { min-height:0; } ul, ol { margin:auto -3em 1em 0; padding:0; position:relative; left:-3em; overflow:hidden; }

ul ul, ul ol, ol ol, ol ul { margin-left:1em; padding-left:0; } ul li, ol li { margin-left:5em; } li li { margin-left:1em; } ul, ol { /* Apply only (!) to IE6 */ height:0; overflow:visible; }

Normal unordered list

This is very useful for list items which are in fact paragraphs and contain a lot of text: o First item inside o Second item inside Another list item a b c d e f g h i j k l m n o Next in here The final item

Normal ordered list

1. This is very useful for list items which are in fact paragraphs and contain a lot of text: 1. First item inside 2. Second item inside 2. Next in here 3. The final item

CSS:
.flat li { margin-left:3em; } .flat li ul, .flat li ol { margin-left:1em; padding-left:0; } .flat li li { margin-left:0; }

Flat unordered list

This is very useful for list items which are in fact paragraphs and contain a lot of text: Another list item with letters inside: o First item inside o Second item inside Next in here The final item

CSS:
In addition to .flat style:
.spaced { margin-bottom:0; } .spaced ul, .spaced ol { margin-top:1em; } .spaced li { margin-bottom:1em; }

Flat and "spaced" unordered list

This is very useful for list items which are in fact paragraphs and contain a lot of text: Another list item with letters inside. Final item on the list.

CSS:
Note: don't forget to remove the line break after list-style-image: to get it work.
ul.bullet-a li { list-style-image: url('bullet-image-a.png'); } ul.bullet-b li { list-style-image: url('bullet-image-b.png'); } .indent li { padding-left:1em; text-indent:-1em; } .inside li {

list-style-position:inside; } .clear li { list-style-type:none; }

Unordered list with image bullets normal

This is very useful for list items which are in fact paragraphs and contain a lot of text: o First item inside o Second item inside About the credit cards and mortage payments; Final item on the list.

Unordered list with image bullets flat

This is very useful for list items which are in fact paragraphs and contain a lot of text: About the credit cards and mortage payments; o First item inside o Second item inside Final item on the list.

Unordered list with image bullets flat and spaced

This is very useful for a a a list which are in fact paragraphs and contain a lot of text; About the credit cards and mortage payments; o First item inside o Second item inside Final item on the list.

Final examples
Simple list

This is very useful for a a a list which are in fact paragraphs and contain a lot of text; o First item inside o Second item inside About the credit cards and mortage payments; Final item on the list.

Normal spaced ordered list

This is very useful for list items which are in fact paragraphs and contain a lot of text: o First item inside o Second item inside

Next in here The final item

Unordered list with image bullets normal

This is very useful for a a a list which are in fact paragraphs and contain a lot of text; o First item inside o Second item inside About the credit cards and mortage payments; Final item on the list.

Unordered list with image bullets flat and spaced

This is very useful for a a a list which are in fact paragraphs and contain a lot of text; About the credit cards and mortage payments; o First item inside o Second item inside Final item on the list.

Unordered list with image bullets flat and spaced

This is very useful for a a a list which are in fact paragraphs and contain a lot of text; About the credit cards and mortage payments; o First item inside o Second item inside Final item on the list.

Flat and indented unordered list

Be sure to take the following things with you:

passport (valid upon 3 month from now) or other ID, printed airplane ticket, hotel confirmation.

Clear unordered list

Be sure to take the following things with you:

passport (valid upon 3 month from now), printed airplane ticket, hotel confirmation.

Unordered list with list bullet inside

Be sure to take the following things with you:

passport (valid upon 3 month from now), printed airplane ticket, hotel confirmation.

Example of an article
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In gravida. Maecenas libero ligula, aliquet a, consequat at, dignissim vitae, eros. Vestibulum posuere urna sed turpis. Cras vulputate tortor sed libero. Nam nulla. Ut et purus id erat mattis nonummy.

Donec blandit ante at metus. Aliquam erat volutpat. Suspendisse nisi magna, venenatis eget, lobortis sit amet, fringilla ut, eros. Morbi pretium, leo eget vulputate blandit, pede sem ornare quam, sed rutrum odio eros eget elit. Nam nulla nisi, laoreet quis, sagittis quis, volutpat sed, diam. Cras diam magna, faucibus sit amet, ornare eget, consequat sit amet, ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam pede. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Duis ultrices eleifend ipsum. Pellentesque eget odio. Donec lobortis. Aenean viverra, arcu sed interdum rhoncus:

pede erat faucibus quam, eu porta lorem justo in odio donec rutrum nisi ut nibh. In felis diam, ultrices nec, mollis at, euismod non, nunc. Sed at mi.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Morbi nunc augue, mattis quis, lacinia in, blandit id, neque. Curabitur cursus magna et massa. Nullam quis sem. Mauris aliquam elementum libero. Maecenas laoreet. Nulla pellentesque tincidunt massa. Mauris at augue ut tellus tincidunt porta. Sed sed quam in magna bibendum ullamcorper. Vestibulum posuere pede non felis. Quisque gravida iaculis sapien. 1. Vivamus odio ipsum, luctus ac, gravida eget, lacinia sit amet, magna. Praesent convallis augue non lectus. 2. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent sollicitudin quam. 3. Sed sodales mi et pede. Phasellus ultricies urna. Pellentesque lobortis. Fusce pellentesque porta lorem. Maecenas nunc ipsum, tincidunt a, luctus id, volutpat sed, orci. Maecenas aliquam. Donec fringilla aliquet risus. Nullam a elit non tellus molestie ullamcorper. Proin porta rhoncus dolor. Morbi rutrum. Aliquam id metus sed purus blandit sollicitudin.

In hac habitasse platea dictumst.

Integer malesuada faucibus mauris. 1. Sed semper, turpis vitae 2. commodo ullamcorper, augue arcu sollicitudin lectus, ac ultrices diam ante ac orci.

Vestibulum molestie, tellus ac pretium accumsan, lacus tellus aliquet nulla, vel commodo ligula ligula sit amet mi. Cras enim lacus, rhoncus vel, molestie tincidunt, ornare at, pede. Sed sapien erat, adipiscing sed, facilisis vel, sollicitudin ut, velit. Nullam quis nulla. Curabitur ligula metus, viverra sed, feugiat ut, porttitor dignissim, erat. Aenean rutrum enim in odio. Sed faucibus dapibus mi. Etiam dapibus. Ut varius lectus in purus. Cras tellus magna, placerat quis, eleifend sit amet, pharetra eget, nunc. Nullam viverra leo id arcu. Mauris eu urna.