A Complete Guide To The Table Element - CSS-Tricks

3/24/2021 A Complete Guide to the Table Element | CSS-Tricks
A Complete Guide to the

Table Element
Chris Coyier on Sep 19, 2013 (Updated on Dec 28, 2020)
The <table> element in HTML is used for displaying tabular data. You can think of it as a
way to describe and display data that would make sense in spreadsheet software.
Essentially: columns and rows. In this article, we’re going to look at how to use them, when
to use them, and everything else you need to know.
(#a-very-basic-example) A Very Basic Example

Here’s a very simple demo of tabular data:
Embedded Pen Here
It is data that is useful across multiple axes. Imagine running your finger across a row
(horizontal) to see a single person and relevant information about them. Or up and down a
column (vertical) to get a sense of the variety or pattern of data on that point.
(#head-and-body) Head and Body

One thing we didn’t do in the very basic example above is semantically indicate that the
first row was the header of the table. We probably should have. That entire first row
contains no data, it is simply the titles of columns. We can do that with the <thead>
(ads via Carbon)
https://css-tricks.com/complete-guide-table-element/ 1/34
element, which would wrap the first <tr> (it could wrap as many rows as needed that are
all header information).
That HTML would be like this:
Embedded Pen Here
When you use <thead> , there must be no <tr> that is a direct child of <table> . All
rows must be within either the <thead> , <tbody> , or <tfoot> . Notice that we also
wrapped all the rows of data in <tbody> here.
(#foot) Foot
Along with <thead> and <tbody> there is <tfoot> for wrapping table rows that
indicate the footer of the table. Like <thead> , best for semantically indicating these are
not data rows but ancillary information.
Back before HTML5, the <tfoot> element was required to be after <thead> and before
<tbody> ! You might think it would be the last thing before the end of <table> , but
wasn’t the case. Now in HTML5, it’s exactly the opposite, it must go after the <tbody>
like you’d probably expect.
It can be used, for example, to repeat the header in the case of a visually very tall/long
table where it may be easier to see the column titles at the bottom than the top. Although
you don’t necessarily need to use it that way.
Embedded Pen Here
(#the-cells-td-and-th) The Cells: td and th

The individual cells of a table are always one of two elements: <td> or <th> . You can put
whatever you want inside a table cell, but these are the elements that make them a table
cell. <th> elements are “tabular headers” and <td> elements are “tabular data”.
Using our existing simple demo, the top row is all headers. Not data, just titles for the data.
All the rest of the rows are data. So:
Embedded Pen Here
<th> elements are not necessarily limited to being within the <thead> . They simply
indicate header information. So they could be used, for instance, at the start of a row in the
<tbody> , if that was relevant. We’ll cover a case like that later.
(#basic-styling) Basic Styling

Most tables you will ever see use colors and lines to distinguish different parts of the table.
Borders are very common. By default, all table cells are spacing out from one another by
2px (via the user-agent stylesheet), like this:
Embedded Pen Here
Notice the slight extra gap between the first row and the rest. That is caused by the default
border-spacing being applied to the <thead> and <tbody> pushing them apart a bit
extra. This isn’t margins, they don’t collapse. You can control that spacing like:
CSS
table {
border-spacing: 0.5rem;
}
But far more common is to remove that space. That property is completely ignored and the
space collapsed if you do:
CSS
table {
border-collapse: collapse;
}
Just a little padding, borders, and making those <th> elements be left-aligned goes a long
way to make for a simple, styled table:
Embedded Pen Here
(#connecting-cells) Connecting Cells

There are two important attributes that can go on any table cell element ( <th> or <td> ):
colspan and rowspan . They accept any positive integer 2 or larger. If a td has a colspan
of 2 (i.e. <td colspan="2"> ) it will still be a single cell, but it will take up the space of
two cells in a row horizontally. Likewise with rowspan , but vertically.
Embedded Pen Here
You’ll have to do a bit of mental math when you start working with connected cells.
Colspan is fairly easy. Any table cell is “worth” one, unless it has a colspan attribute and
then it’s worth that many. Add up the values for each table cell in that table row to get the
final value. Each row should have exactly that value, or else you’ll get an awkward table
layout that doesn’t make a rectangle (the longest row will stick out).
Rowspan is similar, it’s just a little harder and more of a mental leap, because columns
aren’t grouped like rows are. If a table element has a rowspan attribute, it spans across
two rows vertically. That means the row below it gets +1 to it’s table cell count, and needs
one less table cell to complete the row.
It can be awkward to work out in your head, but we’re developers here, we can do it =).
Often these attributes are used in really simple ways like connecting a few related table
headers:
Embedded Pen Here
(#as-wide-as-they-need-to-be-or-fill-the-container-or-
beyond) As Wide As They Need To Be… Or fill the
container… Or beyond
The table element itself is unusual in how wide it is. It behaves like a block-level element
(e.g. <div> ) in that if you put one table after another, each will break down onto its own
line. But the actual width of the table is only as wide as it needs to be.
Embedded Pen Here
If the amount of text in the tables widest row only happens to be 100px wide, the table will
be 100px wide. If the amount of text (if put on one line) would be wider than the container,
it will wrap.
However if text is told to not wrap (i.e. white-space: nowrap; ) the table is happy to
bust out of the container and go wider. Table cells will also not wrap, so if there are too
many to fit, the table will also go wider.
Embedded Pen Here
(#two-axis-tables) Two Axis Tables

Sometimes it makes sense for tabular data to have two axes. Like a cross-reference
situation. A multiplication table is an example of this:
Embedded Pen Here
I might skip a <thead> in this situation even though that first row is all header. It’s just
no more important than the vertical column of headers so it feels weird to group that top
row alone. Just make on row of all <th> and then each subsequent row with the first cell
only as <th> .
(#when-to-use-tables) When To Use Tables

It’s a good time to take a break and discuss the when of tables. Perhaps you’ve heard the
generic advice: tables are for tabular data (see the first sentence of this blog post). The
“would this make sense in a spreadsheet?” test is usually appropriate.
What kinds of things are appropriate in tables? Here are some: a plan/pricing/features
comparison, bowling scores, an internal grid of employee data, financial data, a calendar,
the nutrition facts information panel, a logic puzzle solver, etc.
You might occasionally hear: tables are unsemantic. That’s not true – they semantically
indicate tabular data. Tables are the right choice when that is the case.
(#when-not-to-use-tables) When Not To Use Tables

An inappropriate use for tables is for layout. That may seem counter-intuitive. At a glance
at how tables work may make them seem ideal for layout. Easy to control, extremely
logical, predictable, and not-at-all fragile.
There are some significant problems with using tables for layout though. First, HTML tags
mean things. As we covered, table elements semantically describe tabular data. Using
them for anything else is a breach of semantic duty. You aren’t going to get a fine in the
mail, but you aren’t getting as much value from your HTML as you could.
Talking about semantics is a little difficult sometimes (some reads: 1

(http://coding.smashingmagazine.com/2011/11/12/pursuing-semantic-value/) , 2
(http://coding.smashingmagazine.com/2011/11/12/pursuing-semantic-value/) , 3
(https://www.paulirish.com/2011/semantics/) , 4
(http://alistapart.com/article/semanticsinhtml5) , 5
(http://shapeshed.com/the_importance_of_semantic_markup/) ), so let’s talk about
something we all generally agree on (even if we aren’t as good as it as we want to be):
websites should be accessible. One part of accessibility is screen readers. Screen readers
read tables from top to bottom, left to right. That means the order of how your site is
presented is dictated by the table structure, which is dictated by visual choices not
accessibility choices. Not to mention a screen reader may even announce the start of
tabular data which would be worse than useless.
Speaking of source order, that affects more than accessibility. Imagine a “sidebar on the
left” layout. A table would dictate that table comes first in the source order, which while
also being bad for accessibility, is likely bad for SEO as well, potentially valuing your
ancillary content above primary content.
Could you fix the SEO issues by using semantic tags within the table tags? Possibly
somewhat, but now you’re using double the HTML. If you really need the layout abilities of
a table but want to use semantic tags, see the next section. If you are somehow absolutely
stuck using table tags for layout, use the ARIA role="presentation" on the table to
indicate it as such.
As I write this in the latter half of 2013, tables have become far less prevalent and even
appealing as a layout choice. We’re seeing a lot more use of fixed and absolute positioning
which you cannot do inside a table. We’re seeing flexbox being awesome and being right on
the edge of mainstream usability. We’re seeing grid layout starting to grow up. We’re
seeing inline-block be used powerfully. We’re seeing the fragility of floats in the olden
days fade away.
Rarely do you see modern websites touch tables for layout. The last holdout is HTML
emails. The landscape of what renders emails is super wide. It is everything we deal with
on the web, plus the world of native apps on both mobile and desktop on operating systems
new and ancient. You can do some progressive enhancement for emails, but the layout
itself is still generally regarded as being safest done in tables. That is substantiated by the
fact that the major email sending services still all offer templates as tables.
(#making-semantic-elements-behave-like-a-table)
Making Semantic Elements Behave Like a Table
CSS has properties to make any element you wish behave as if it was a table element.
You’ll need to structure them essentially as you would a table, and it will be subject to the
same source-order-dependency as a table, but you can do it. I’m not crapping on it either,
it’s genuinely useful sometimes. If that layout style solves a problem and has no negative
order implications, use it.
Don’t use inline styles, but just for understanding here’s how that would go:
HTML
<section style="display: table;">

<header style="display: table-row;">
<div style="display: table-cell;"></div>
</header>
<div style="display: table-row;">
</div>
</section>
A handy trick here is that you don’t even need the table-row element in there if you don’t
want. A bunch of display: table-cell; elements that are children of a display:
table; element will behave like they are all in one row.
You always alter the display property of the element to get the table-style behavior. Here’s
the values:
CSS
display: table /* <table> */

display: table-cell /* <td> */
display: table-row /* <tr> */
display: table-column /* <col> */
display: table-column-group /* <colgroup> */
display: table-footer-group /* <tfoot> */
display: table-header-group /* <thead> */
Notice there is no <th> alternative. That is for semantic value only. It otherwise behaves
just like a <td> , so, no need to replicate it in CSS.
There is also display: inline-table; which is pretty interesting. Remember we

talked about how weird table elements widths are above. They are only as wide as they
need to be, yet break onto new lines. It’s almost like they are inline-block elements which
happen to break. This makes them literally like inline-block elements, without the
breaking.
If you want to learn a lot more about using semantic elements but also table-style layout,
check out the book Everything You Know About CSS Is Wrong!
(http://www.sitepoint.com/store/everything-you-know-about-css-is-wrong/)
I’ve never been a huge fan of that title as it suggests that using this table style layout is the
right way and any other layout technique you use is the wrong way. But as I’ve said, this
can be tremendously useful and I’m glad it’s in CSS. Just be acutely aware that no matter
what kind of elements you use to create a table-based layout, it still subject to the same
problems (largely source order dependency).
(#all-table-related-elements) All Table Related

Elements
There is a few elements above we haven’t touched on yet. Let’s look at all the HTML table
related elements. You know what, we might as well use a table to do it:
Element What it is
<table> The table itself
<caption> The caption for the table. Like a figcaption to a figure.
<thead> The table header
<tbody> The table body
Element What it is
<tfoot> The table footer
<tr> A table row
<th> A table cell that is a header
<td> A table cell that is data
<col> A column (a no-content element)
<colgroup> A group of columns
(#all-table-related-attributes) All Table Related

Attributes
There are suprisingly few attributes that are specific to tables. Of course you can use class
and ID and all the typical global attributes (https://developer.mozilla.org/en-
US/docs/Web/HTML/Global_attributes) . There used to be quite a few, but most of them
were specific to styling and thus deprecated (as that is CSS’s job).
Element(s)
Attribute What it does
Found On
colspan th, td extends a cell to be as wide as 2 or more cells
rowspan th, td extends a cell to be as tall as 2 or more cells
span col Makes the column apply to more to 2 or more columns
Indicates the table should allow sorting. UPDATE: I’m told this was removed from spec because of
sortable table
lack of implementations.
headers td space-separated string corresponding to ID’s of the <th> elements relevant to the data
Element(s)
Attribute What it does
Found On
row | col | rowgroup | colgroup (default) – essentially specifies the axis of the header. The default
scope th is that a header is heading a column, which is typical, but a row might start with a header also,
where you would scope that header to the row or rowgroup.
(#deprecated-attributes) Deprecated Attributes

Don’t use any of these. The are deprecated. While they may work in some browsers today,
there is a chance they stop working in the future.
Deprecated
What to use instead
Attribute
align Use float property instead
valign Use vertical-align property instead
The correct answer is to use text-align: "x"; where x is the character to align on, but it’s not implemented
char
anywhere yet. But this attribute isn’t supported either, so no big loss.
charoff See above
bgcolor Use background property instead
“consider starting the cell content by an independent abbreviated content itself or use the abbreviated content as
abbr
the cell content and use the long content as the description of the cell by putting it in the title attribute”
axis Use the scope attribute instead
border Use border property instead
cellpadding Using padding property instead
cellspacing Use border-spacing property instead
frame Use border property instead
Deprecated
What to use instead
Attribute
rules User border property instead
summary Use <caption> element instead
width Use width property instead
(#the-table-stack) The Table Stack

There is an implied vertical stacking of table elements, just like there is in any HTML
parent > descendent scenario. It is important to understand in tables because it can be
particularly tempting to apply things like backgrounds to the table itself or table rows,
only to have the background on a table cell “override” it (it is actually just sitting on top).
Here’s how that looks (using Firefox 3D feature in its dev tools):
(#important-style-rules-for-tables) Important Style

Rules for Tables
You can use most CSS properties on table elements. font-family works on tables just
like it does on any other element, for example. And the rules of cascade apply. Apply
font-family to the table, but a different font-family on the table cell, the table cell
wins because that is the actual element with the text inside.
These properties are either unique to table elements or they behave uniquely on table
elements.
CSS Possible
What it does
Property values
baseline
sub
super
text-top
text-
vertical- Aligns the content inside a cell. Works particularly well in tables, although only the top/bottom/middle
bottom
align make much sense in that context.
middle
top
bottom
%
length
normal
pre
white- nowrap
Controls how text wraps in a cell. Some data may need to be all on one line to make sense.
space pre-
wrap
pre-line
Applied to the table to determine if borders collapse into themselves (sort of like margin collapsing
border- collapse only bi-directional) or not. What if two borders that collapse into each other have conflicting styles
collapse separate (like color)? The styles applied to these types of elements will “win”, in order of “strength”: cell, row,
row group, column, column group, table.
If border-collapse is separate , you can specify how far cells should be spaced out from each
border-
length other. Modern version of cellspacing attribute. And speaking of that, padding is the modern
spacing
version of the cellpadding attribute.
Width works on table cells just about how you would think it does, except when there is some kind of
conflict. For instance if you tell the table itself to be 400px wide then the first cell of a three-cell row to
be 100px wide and leave the others alone, that first cell will be 100px wide and the other two will split
width length
up the remaining space. But if you tell all three of them to be 10000px wide, the table will still be 400px
and it will just give each of them a third of the space. That’s assuming white-space or elements like an
image don’t come into play. This is probably a whole post in itself!
CSS Possible
What it does
Property values
Border works on any of the table elements and just about how you would expect. The quirks come in
when you collapse the borders. In this case all table cells will have only one border width between
them, rather than the two you would expect them to have (border-right on the first cell and border-left
border length
on the next cell). In order to remove a border in a collapsed environment, both cells need to “agree” to
remove it. Like td:nth-child(2) { border-right: 0; } td:nth-child(3) { border-left:
0; } Otherwise, source order/specificity wins which border is shown on which edge.
auto is the default. The width of the table and its cells depends on the content inside. If you change
table- auto this to fixed , the table and column widths are set by the widths of table and col elements or by the
layout fixed width of the first row of cells. Cells in subsequent rows do not affect column widths, which can speed
up rendering. If content in subsequent cells can’t fit, the overflow property determines what happens.
This list isn’t exhaustive. There are other CSS quirks that are relevant to tables. For
instance, you can’t relatively position a table cell in which to either nudge it around or
absolutely position things within it. There are ways though. (https://css-
tricks.com/absolutely-position-element-within-a-table-cell/)
If you can think of more CSS weirdness with tables, share in the comments below.
(#default-styles-user-agent-stylesheet) Default Styles /

User Agent Stylesheet
WebKit does this
(https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css) :
CSS
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray
}
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit
}
tbody {
display: table-row-group;
}
tfoot {
display: table-footer-group;
}
table > tr {
}
col {
display: table-column
}
colgroup {
display: table-column-group
}
tr {
display: table-row;
vertical-align: inherit;
}
td, th {
display: table-cell;
vertical-align: inherit
}
th {
font-weight: bold
}
caption {
display: table-caption;
text-align: -webkit-center
}
I inspected each element in Chrome Dev Tools too, which is now on Blink, and it’s still the
same.
It’s funny though. For sure, the text in <th> s is centered ( text-align: center; ) by
default. But that’s not in the UA stylesheet. Not a huge deal but rather mysterious and
makes you wonder what other mysterious things happen in rendering.
The UA stylesheet for tables differs from browser to browser. For example, in Firefox
(here’s 3.6’s UA Stylesheet (https://codepen.io/chriscoyier/pen/EnxiB.css) , but this is
true in v23 too) table cells have this:
CSS
td {
display: table-cell;
vertical-align: inherit;
text-align: inherit;
padding: 1px;
}
Most notably, 1px of padding that WebKit doesn’t have. Not a huge deal in most cases,
surely, but it is different. That’s what CSS resets (and related projects) are all about:
removing the differences. So let’s check those out.
(#resetting-default-table-styles) Resetting Default

Table Styles
The most popular CSS reset in the world, the Meyer Reset
(http://meyerweb.com/eric/tools/css/reset/) , does this to tables:
CSS
table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
table {
border-spacing: 0;
}
It’s done the same way in the HTML5 Reset (https://github.com/murtaugh/HTML5-

Reset/blob/master/_/css/reset.css) and the HTML5 (Doctor) Reset Stylesheet
(http://html5doctor.com/html-5-reset-stylesheet/) .
There is an alternative to CSS resets though, Normalize.css

(https://necolas.github.io/normalize.css/) . The philosophy is slightly different. Rather
than zero out all styles, it specifically sets known-to-be inconsistent styles to a reasonable
default. My general advice on using Normalize.css is: don’t remove anything from it. If it’s
in there, it needs to be for consistency. But feel free to change anything in there.
Normalize only does this to tables:
CSS
table {
border-spacing: 0;
}
I’ll have to dig into the reasoning here a little deeper because it seems unusual…
1. I’m a fan of border-collapse: collapse because spacing between cells is usually way
awkward, but, the default in every browser I know of is border-collapse: separate;
so isn’t in need of normalization.
2. If border-collapse is collapse , border-spacing doesn’t matter.
3. Table cell elements are in need of normalization (e.g. Firefox padding difference) but that
isn’t there.
Not a hugely big deal.
This is the kind of thing I would probably normally do:
CSS
table {
width: 100%;
}
th, td {
padding: 0.25rem;
text-align: left;
border: 1px solid #ccc;
}
(#implied-elements-and-unclosed-tags) “Implied”
Elements and Unclosed Tags
Check out this rather awkward bit of HTML:
HTML
<table>
<col>
<tr>
<td>Cell
</table>
This may be weird to look at, but it’s valid. What’s going on here?
⦾ The <col> tag is just one of those no-content elements that doesn’t ever need a closing
tag. Like <br> / <br />
⦾ The <td> element doesn’t need to be closed in certain circumstances: “The end tag may
be omitted, if it is immediately followed by a <th> or <td> element or if there are no more
data in its parent element.”
⦾ The missing closing </tr> tag is the same story: “The end tag may be omitted if the <tr>
element is immediately followed by a <tr> element, or if the parent table group (<thead>,
<tbody> or <tfoot>) element doesn’t have any more content.”
If we inspect the rendered table in the browser, we can see that the tags that were missing
their closing tags are shown with closing tags. Those are automatically added for us. But
there are also some brand new elements in there:
One thing to notice is the <col> is wrapped within a <colgroup> automatically. Even if
we were to do:
HTML
<table>
<col>
<colgroup>
<col>
</colgroup>
<tr>
<td>Cell
<td>Cell
</table>
Then:
CSS
colgroup:first-child {
background: red;
}
You would think the second cell would be red, not the first, because the “first” colgroup
only affects the second cell. But when rendered, both of those columns get wrapped in a
colgroup, so the CSS selector will select the first one.
The <tbody> element is also implied. If you don’t use any of tbody, thead, or tfoot, the
whole guts of the table will be wrapped in tbody. If you use a thead, the whole table will be
wrapped in that until it find a tbody, then it will auto-close the thead if you don’t, and wrap
the rest in tbody (also optional to close). If if finds a tfoot, you can imagine what happens
(although remember tfoot should come before tbody).
You can actually use these elements in CSS selectors even though you didn’t put them in
your actual HTML. I probably wouldn’t advise it just because that’s weird, confusing, and
styling tag selectors usually isn’t advisable anyway.
(#making-a-table-not-a-table) Making a Table Not a

Table
A situation may arise someday where you need to force a table element to not exhibit its
table-style layout behavior and behave more like a regular element.
The trick is essentially to reset the display property of the table cells:
CSS
th, td {
display: inline;
}
We can pretty quickly un-table a table:
Embedded Pen Here
Just to be safe, I’d reset the whole she-bang. Just makes me feel better knowing parent
elements are also along for the ride and won’t get freaky.
CSS
table, thead, tbody, tfoot, tr, td, th, caption {

display: block;
}
This is primarily useful in responsive design where the traditional table layout makes
sense on large screens but needs significant shifts to make sense on smaller screens.
There is a whole section on that below.
(#table-accessibility) Table Accessibility

We already talked about the problems with using tables for layout and accessibility. But
assuming table is being correctly used for tabular data, there are still quite a few
accessibility concerns.
There are some great articles on this out there:
⦾ WebAIM: Creating Accessible Tables (http://webaim.org/techniques/tables/)

⦾ Portland Community College: Examples of Good and Bad Table Layout for Screen
Readers (http://www.pcc.edu/resources/instructional-support/access/table-layout-
examples.html)
⦾ Web Usability: Accessible Data Tables (http://usability.com.au/2005/06/accessible-

data-tables-2005/)
(#zebra-striping-tables) Zebra Striping Tables

If you don’t set a background-color on the table cell elements, you can set them on the
table rows themselves. So at the most basic, you can do:
CSS
tbody tr:nth-child(odd) {
background: #eee;
}
We’re using the tbody in the selector because it’s unlikely you’d want to stripe header and
footer rows. Set the even rows as well if you want to be specific about it instead of let what
is underneath show through.
If you need to support browsers that don’t understand :nth-child() (pretty damn old) you
could use jQuery to do it (https://css-tricks.com/snippets/jquery/jquery-zebra-stripe-a-
table/) .
Embedded Pen Here
Studies seem to show (http://alistapart.com/article/zebrastripingmoredataforthecase)

that zebra stripping in generally a good idea.
(#highlighting-rows-and-columns) Highlighting Rows

and Columns
Hightlighting a particluar row is fairly easy. You could add a class name to a row
specifically for that:
HTML
<tr class="highlight">
...
</tr>
Embedded Pen Here
Highlighting a column is a bit trickier. One possibility is to use the <col> element, which
does allow us to set styles for cells that appear in that column. It’s weird to wrap your head
around, because the cells that are affected by <col> aren’t actually descendants of it. The
browser just kinda knows what you mean.
A table with four columns in each row would have four <col> elements:
HTML
<table>
<col>
<col>
<col>
<col>
<thead>
...
</table>
Then you could highlight a particular one, like:
CSS
col:nth-child(3) {
background: yellow;
}
Embedded Pen Here
However this is rarely useful. If you set the background of a row element or table cell
element, that will always beat a background of a column element. Regardless of
specificity.
You’re probably better off setting a class name on each individual table cell element that
happens to match that column position in the row. Like:
CSS
td:nth-child(2),
th:nth-child(2){
background: yellow;
}
(#highlighting-column-row-cell-on-hover) Highlighting
Column/Row/Cell on Hover
Cell highlighting is very easy. You can do it right in CSS:
CSS
td:hover { /* th:hover also if you wish */

background: yellow;
}
Row highlighting is just as easy. You can set the background on table rows and it will show
as long as you don’t set a background on the table cells.
CSS
tbody tr:hover {
background: yellow;
}
Embedded Pen Here
If you do set a background on the table cells, you can always just to tr:hover td,
tr:hover th { } so still pretty easy.
Column highlighting is tricker. You can’t use col:hover because those columns aren’t
actual elements that take up pixel space on the screen that you could hover over. The only
option is JavaScript.
I wrote it up in Vanilla JavaScript here, just for fun:
Embedded Pen Here
It works like this:
1. Get a collection of all cells

2. Bind a mouseover and mouseout event to all those cells
3. When the mouseover event fires, get the position in the row of that cell
4. Loop through all rows and add a highlighting class to each cell in that row that matches
that position
5. When the mouseout event fires, remove the highlighting class from all cells
And here I’ve combined both row and column highlighting. I used jQuery to make it all 12
lines of code (the raw JavaScript was getting pretty exhausting).
Embedded Pen Here
It’s the same concept, it’s just much easier to make element collections, and find and
select by indexes in jQuery.
(#nicely-styled-tables) Nicely Styled Tables

Some depth, visually distinct headers, and a terminal matching the header.
Embedded Pen Here
When the table is hovered, only the current row highlighted stays dark text, the others
fade back. Also note on this one: the roundered corners on the table itself are only possible
while you have border-collapse: separate;
Embedded Pen Here
Here’s another where the non-hovered rows literally blur:
Embedded Pen Here
Twitter Bootstrap (https://getbootstrap.com/) has very minimal table styling:
Embedded Pen Here
This one, as a bonus, has keyboard control!
Embedded Pen Here
I’m trying to keep a collection of well-designed tables

(https://codepen.io/collection/nhowz/) for reference. So if you have any good ones, let me
know. Hong Kiat also has a blog post collection (http://www.hongkiat.com/blog/html-
table-building-30-beautiful-examples-and-useful-javascripts/) .
(#table-search) Table Search

Where table sorting can be quite complicated, table search can be quite easy. Add a search
input, and if the value in there matches text anywhere in a row, show it, and hide the
others. With jQuery that might be as easy as:
jQuery
var allRows = $("tr");

$("input#search").on("keydown keyup", function() {
allRows.hide();
$("tr:contains('" + $(this).val() + "')").show();
});
Here’s a take with RegExp instead:
Embedded Pen Here
And here’s on in raw JavaScript:

Embedded Pen Here
(#tables-can-be-difficult-in-fluid-responsive-designs)
Tables Can Be Difficult in Fluid/Responsive Designs
I’ve written about this in the past (https://css-tricks.com/responsive-data-tables/) , and I
think this graphic kind of sums up the experience of a data table on a small screen:
I ultimately created a roundup (https://css-tricks.com/responsive-data-table-roundup/)

once a variety of interesting solutions came around.
Real quick though:
⦾ Turn Rows into Blocks (1) (https://css-

tricks.com/examples/ResponsiveTables/responsive.php) (2)
(https://johnpolacek.github.io/stacktable.js/)
⦾ FooTable (http://fooplugins.com/footable-demos/) – jQuery plugin which hides rows

and makes that data available via a toggle icon.
⦾ Turn data into chart (http://jsbin.com/emexa4)
⦾ Hide columns to save room, allow user to toggle them back on
(http://filamentgroup.com/examples/rwd-table-patterns/)
⦾ Squish cells and allow them to wrap (dead link :()
⦾ Fix a header and allow the body to scroll (1)
(http://zurb.com/playground/playground/responsive-tables/index.html) (2)
(http://dbushell.com/demos/tables/rt_05-01-12.html) (3)
(https://getbootstrap.com/css/#responsive-tables)
Here’s a couple of styled live demos with different takes:
Embedded Pen Here
Embedded Pen Here
(#fixed-header-tables) Fixed Header Tables

This is another thing I’ve written about in the past (https://css-tricks.com/persistent-
headers/) as well as done a little screencast (https://css-tricks.com/video-
screencasts/66-table-styling-2-fixed-header-and-highlighting/) . Those are fairly old, but
the demo still works (https://css-tricks.com/examples/PersistantHeaders/) .
The most modern way of handling fixed headers is position: sticky; Here’s an article
on that (https://developers.google.com/web/updates/2012/08/Stick-your-landings-
position-sticky-lands-in-WebKit) . I’m honestly not quite sure the recommended way to
use it with tables though. It doesn’t work on <thead> under normal circumstances. That
kinda makes sense because you can’t absolutely position table innards. But it does work on
<th> . Anyway if someone wants to figure that out, that’d be a good update to this article
(or something).
Here’s a live demo of a jQuery plugin that does the trick. I’d probably go for something like
this these days until sticky shakes out more.
Embedded Pen Here
(#using-emmet-for-creating-table-markup) Using
Emmet for Creating Table Markup
Emmet (http://emmet.io/) is a great tool for a bunch of reasons. One of which is writing
HTML abbreviations (http://docs.emmet.io/abbreviations/) and having them expand out
into real HTML. Since tables are so repetitive and verbose, Emmet is perfect for them.
Emmet works on CodePen too =)
Simple four rows and four columns
HTML
table>tr*4>td*4
Five rows with the header on the left
HTML
table>tr*5>th+td*4
A row of headers on the top
HTML
table>tr>th*5^tr*3>td*5
Employees with incrementing IDs
HTML
table>tr>th{Name}+th{ID}+th{Favorite Color}^tr*3>td{Name}+td{$$$$$}+td{Blue}
Table with header, footer, and content
HTML
table>thead>tr>th*5^^tfoot>tr>th*5^^tbody>tr*10>th+td*4
Same but with cell content in each cell
HTML
table>thead>tr>th{Header Cell}*5^^tfoot>tr>th{Footer Cell}*5^^tbody>tr*10>th{Row Header}+td{Cell Data}*
(#javascript-generated-tables) JavaScript Generated

Tables
JavaScript provides some very specific methods for dealing with tables through the
HTMLTableElement API. Louis Lazaris wrote a little about it (http://us5.campaign-
archive1.com/?u=ea228d7061e8bbfa8639666ad&id=f7212bdeba&e=313c7b398a) recently.
You can use it to create tables with JavaScript, access sub-elements, and change
properties in very specific ways. Here’s the MDN page (https://developer.mozilla.org/en-
US/docs/Web/API/HTMLTableElement) with the scoop.
Here’s that at work:
Embedded Pen Here
(#table-sorting) Table Sorting

Imagine a table with two columns. One for Employee ID’s and another for Employee Email
Address. There are headers for each column. It would be handy to be able to click those
headers and sort the table by the data inside. For instance, numerical order, alternating
between ascending and descending, for the ID’s and alphabetical for the email addresses.
That’s what table sorting is all about. Making the data more useful.
This is such a common and generic need, that there is actually specification ready for it.
Just put the sortable attribute on the table and it will automatically do it as long as you
follow a couple of rules laid out in the spec. Update June 2109: Removed link, it no longer
mentions sortable. Seems like a dead spec for now.
At the time of this writing, I don’t know of any browsers supporting table sorting natively.
But there are lots of third-party options!
⦾ tablesorter (http://tablesorter.com/docs/) – jQuery-based “Flexible client-side table

sorting”
⦾ sorttable (http://www.kryogenix.org/code/browser/sorttable/) – raw javaScript
⦾ tablesort (http://tristen.ca/tablesort/demo/) – “a small & simple sorting component for
tables. Written in Javascript and dependency free”
What’s with table sorting scripts and lowercase? Anyway, here’s a demo of tablesorter:
Embedded Pen Here
If those don’t do it for you, Codrops rounded up 33 different table sorting scripts
(http://tympanus.net/codrops/2009/10/03/33-javascript-solutions-for-sorting-tables/) ,
so there are plenty to choose from.
And those are all JavaScript solutions. It’s certainly possible to sort data on the back-end
and display the table already sorted in the HTML. That might be required in the case of
paginated tables where all the data isn’t available right in the DOM.
(#more-information) More Information

⦾ The Spec (https://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-
data.html)
⦾ MDN (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)

A Complete Guide To The Table Element - CSS-Tricks

Uploaded by

Copyright:

Available Formats

A Complete Guide To The Table Element - CSS-Tricks

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

A Complete Guide To The Table Element - CSS-Tricks

Uploaded by

Copyright:

Available Formats

3/24/2021 A Complete Guide to the Table Element | CSS-Tricks

A Complete Guide to the

(#a-very-basic-example) A Very Basic Example

Embedded Pen Here

(#head-and-body) Head and Body

(ads via Carbon)

That HTML would be like this:

Embedded Pen Here

Embedded Pen Here

(#the-cells-td-and-th) The Cells: td and th

Embedded Pen Here

(#basic-styling) Basic Styling

Embedded Pen Here

Embedded Pen Here

(#connecting-cells) Connecting Cells

Embedded Pen Here

Embedded Pen Here

Embedded Pen Here

Embedded Pen Here

(#two-axis-tables) Two Axis Tables

Embedded Pen Here

(#when-to-use-tables) When To Use Tables

(#when-not-to-use-tables) When Not To Use Tables

Talking about semantics is a little difficult sometimes (some reads: 1

<section style="display: table;">

display: table /* <table> */

There is also display: inline-table; which is pretty interesting. Remember we

(#all-table-related-elements) All Table Related

<table> The table itself

<caption> The caption for the table. Like a figcaption to a figure.

<thead> The table header

<tbody> The table body

<tfoot> The table footer

<tr> A table row

<th> A table cell that is a header

<td> A table cell that is data

<col> A column (a no-content element)

<colgroup> A group of columns

(#all-table-related-attributes) All Table Related

colspan th, td extends a cell to be as wide as 2 or more cells

rowspan th, td extends a cell to be as tall as 2 or more cells

span col Makes the column apply to more to 2 or more columns

(#deprecated-attributes) Deprecated Attributes

align Use float property instead

valign Use vertical-align property instead

charoff See above

bgcolor Use background property instead

axis Use the scope attribute instead

border Use border property instead

cellpadding Using padding property instead

cellspacing Use border-spacing property instead

frame Use border property instead

rules User border property instead

summary Use <caption> element instead

width Use width property instead

(#the-table-stack) The Table Stack

(#important-style-rules-for-tables) Important Style

(#default-styles-user-agent-stylesheet) Default Styles /

makes you wonder what other mysterious things happen in rendering.

table>thead>tr>th{Header Cell}5^^tfoot>tr>th{Footer Cell}5^^tbody>tr10>th{Row Header}+td{Cell Data}