A CSS styled table version 2. In 2005 I wrote an article about styling a table with CSS. After receiving so many requests I finally decided to give in and write another tutorial. Seems like a popular topic and an interesting one to share some tricks on how you can nicely style them. This article is about the proper usage of tables, for tabular data. How you can implement them with accessibility in mind and how to make them appealing for the eye using CSS. The XHTML If you've ever read my first article, you might remember that I suggested you to read Roger's article 'Bring on the tables'.
Make sure to use the th elements for the headers in combination with the scope attribute Add a caption to your table, especially when there is more then 1 table on the same page Use the summary attribure in the table element to describe the content of the table Divide your table into sections by grouping table rows using the thead, tfoot and tbody element if needed Why use table headers and scope? It gives you 2 advantages. The CSS. CSS-Based Tables: Modern Solutions. Advertisement We continue to present some of the best CSS-techniques which web-developers can always use working on their current web-project. Recently we’ve taken a look at the best css-based forms1, today we present some useful techniques for displaying information in a tabular mode.
In fact, tables can present data quite efficiently, particularly if you can use some sorting or filtering functions in order to improve the legibility of the text stored in the table. Furthermore, Zebra tables are becoming more and more popular, and the techniqies supposed to enhance their functionality appear on a weekly basis. So what do we have? Let’s take a look around: over 28 modern css-based techniques in a brief overview. Zebra Tables Redesigning a simple table3 Zebra Tables5 Better Zebra Tables7 Splintered striper: Enhanced Zebra Stripes9 Standardista Table Sorting (A client-side JavaScript Table Sort module)10 Designing Tables with Stylesheets12 SortedTable instructions and examples14 Table not a table30.
Frequency decoder | Unobtrusive Table Sort Script (revisited) A rewrite of the original table sort script that includes a few more features and a much faster sort routine architecture My first free Sunday morning in what seems like an epoch produces a complete rewrite of the original (and by far most popular) lab experiment, the “Unobtrusive Table Sort Script”, that addresses speed issues present within version #1. Plays nicely with the JavaScript global namespace (the script creates and reuses only one JavaScript object) Multiple columns can be sorted at once by pressing Shift while selecting the columns using either the keyboard or mouse The new script sorts (on average – based on my very non-scientific calculations), 5 times faster than its predecessor The plug-in architecture makes writing custom sort functions a breeze The script can highlight both alternate rows and full columns on a table by table basis.
Like its predecessor, the script is fully keyboard accessible The script is smart enough not to sort columns containing identical data. Center a table with CSS. The old way to center a table was easy: <table align="center"> ... </table> The "align" attribute has been deprecated, however, in favor of CSS (Cascading Style Sheets), and this is a good thing. However, it's not so obvious how to center a table using CSS. The obvious way might appear to use the CSS "text-align: center;" somewhere, maybe like one of these: <div style="text-align:center;"><table> ... </table></div> OR, if you get really desperate, <body style="text-align:center;"><table> ... None of these will work. Why? Method 1 To center a table, you need to set the margins, like this: And then do this: <table class="center"> ... At this point, Mozilla and Opera will center your table.
Method 2 If you want your table to be a certain percentage width, you can do this: And then in your HTML/XHTML, you would do this: <table id="table1"> ... Note that I was using an id to describe the table. And this in your HTML: Method 3 If you want your table to be of fixed width, define your CSS like this: CSS - Fun with tables. Page last changed today On this page I explain some of the new CSS declarations to be used with tables. This is the default table with only a border defined for the TDs. Note the space between the TDs: as has been the case since the invention of tables, the default cellspacing is 1. The table has empty-cells: show by default. It should display the border of the empty cell, but doesn't in IE7-. empty-cells This declaration takes two values: show: show empty cells (with a border). Border-collapse separate: keep borders separate.
Border-collapse: collapse should overrule cellspacing. Border-spacing border-spacing is cellspacing translated to CSS. You can use two values: the first is the horizontal cellspacing, the second the vertical one. table-layout table-layout takes two values: auto: the table is layed out normally (see below). Let's give the test table a width. If we add table-layout: fixed, however, the table obeys the width, even if that results in unreadable content. caption-side top.