Comments on: A Complete Guide to the Table Element https://css-tricks.com/complete-guide-table-element/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Fri, 18 Nov 2022 23:43:06 +0000 hourly 1 https://wordpress.org/?v=6.5.5 By: Daniel Ferro https://css-tricks.com/complete-guide-table-element/#comment-1581150 Tue, 13 May 2014 20:34:22 +0000 http://css-tricks.com/?p=150162#comment-1581150 Nothing wrong with using tables for layout. Yes it is a hack, but so is using CSS and DIVs for layout. Neither were intended for layout. And tables have much better inherit properties that make them ideal for layout purposes. If content within a cell is wider than the cell width, the cell will stretch to accommodate the content, and all surrounding cells will stretch as well.

I have done extensive work with Section 508. Layout tables present no accessibility problems if used correctly (don’t use THs if it is just a layout table, and for goodness sakes do not give the table a caption or summary at all if it just a layout table). I really am baffled by the modern web design communities demonization of layout tables.

It’s just a tool guys. If it works across the browsers you need it to, if it functions as intended and presents no accessibility problems, by all means use it. Using layout tables intermingled with layout DIVs can be a great best of both world approaches to get your site done fast.

If it works use it.

]]>
By: Brbenbrousse https://css-tricks.com/complete-guide-table-element/#comment-1565699 Sat, 12 Apr 2014 17:50:23 +0000 http://css-tricks.com/?p=150162#comment-1565699 Very useful post, thank you.

Maybe someelse already told you but can I suggest a little change in your javascript code for the “simple search” in table. In order to select the rows under the header you use
var rows = $('table tr:gt(0)');
I suggest to use
var rows = $('tbody tr');
I had a problem when I used your code with a two rows header.

]]>
By: Chuck https://css-tricks.com/complete-guide-table-element/#comment-1237883 Mon, 03 Mar 2014 23:05:21 +0000 http://css-tricks.com/?p=150162#comment-1237883 Since I only work on web applications that sit behind authentication I completely avoid using the table element and it saves me a ton of time and headaches. The table and associated elements are unpredictable and have too much quirkiness for my liking.

]]>
By: Tony https://css-tricks.com/complete-guide-table-element/#comment-993896 Mon, 30 Dec 2013 16:23:12 +0000 http://css-tricks.com/?p=150162#comment-993896 In reply to Tony.

Many thanks Paul, exactly what I need.

]]>
By: Paul Bastowski https://css-tricks.com/complete-guide-table-element/#comment-993683 Mon, 30 Dec 2013 15:43:45 +0000 http://css-tricks.com/?p=150162#comment-993683 In reply to Tony.

Hi Tony

Have a look at the following jsFiddle: http://jsfiddle.net/SBp3K/

Paul

]]>
By: Tony https://css-tricks.com/complete-guide-table-element/#comment-993472 Mon, 30 Dec 2013 15:06:41 +0000 http://css-tricks.com/?p=150162#comment-993472 Great guide.

I wonder if you or anyone can help me with a table problem – I want to have a 2 column table with several rows but the only border I want in the right hand side of column 1. The effect would be a vertical line between the two columns.

Any help greatly appreciated.

]]>
By: Andrew https://css-tricks.com/complete-guide-table-element/#comment-825498 Fri, 13 Dec 2013 16:05:24 +0000 http://css-tricks.com/?p=150162#comment-825498 As usual, simply excellent. Actually I was looking for something a little different, but this was among my search results: “A complete guide to the table element” by Chris Coyier. Got to be worth reading I thought. Dead right :)

I see you mention tablesorter and link to an article giving many more such resources, including the very comprehensive datatables.net. Some might want to investigate jtable which I’ve found good (I note most jtable functionality is available without further plugins).

Thanks again for a great article.

]]>
By: AaronL https://css-tricks.com/complete-guide-table-element/#comment-780355 Sat, 07 Dec 2013 22:36:37 +0000 http://css-tricks.com/?p=150162#comment-780355 Something else that might be considering is using Jquery to dynamically size your table elements. Although this could be a bit of a head scratcher unless you are already converting a template to start of with. Google is your friend.

]]>
By: Will https://css-tricks.com/complete-guide-table-element/#comment-765646 Thu, 05 Dec 2013 21:18:41 +0000 http://css-tricks.com/?p=150162#comment-765646 Good stuff, thank you!

Noticed repeating ids in one of the filtering examples and instead of internet-commenting about it, thought I’d fix it on codepen and share it. http://codepen.io/anon/pen/BysKz if you’d like to update it.

Thanks again!

]]>
By: AaronL https://css-tricks.com/complete-guide-table-element/#comment-753633 Tue, 03 Dec 2013 14:13:59 +0000 http://css-tricks.com/?p=150162#comment-753633 In reply to Russell Heimlich.

Good article on how versatile you can be with CSS and making tables pretty.

]]>
By: Arvind https://css-tricks.com/complete-guide-table-element/#comment-703109 Mon, 25 Nov 2013 12:32:47 +0000 http://css-tricks.com/?p=150162#comment-703109 Great article. I don’t know much HTML / CSS. This helped me to quickly create a HTML table.

]]>
By: Marian https://css-tricks.com/complete-guide-table-element/#comment-682728 Wed, 20 Nov 2013 11:53:31 +0000 http://css-tricks.com/?p=150162#comment-682728 Hi, I’m having a problem adapting 2 variable tables in the same div.

I have a main div containing 2 tables, both have to have variable width, the only thing I know is the left hand side table could come with 2, 3, 4, 5 or 6 columns, but have to have a max width of 39% (in the case is coming with 6 columns)

The right hand side table has to adapt the remaining space from the left hand table, and the max width this table would have (imaging that the left hand side table has only 2 columns) is 83% more or less.

Do you have any ideas how to adapt both in the same div without jumping next line and make both adapting to the 100% div space?

Thanks in advance, Marian.

]]>
By: C R https://css-tricks.com/complete-guide-table-element/#comment-679346 Tue, 19 Nov 2013 10:54:01 +0000 http://css-tricks.com/?p=150162#comment-679346 In reply to Emil.

Agreed also!
Excellent article and I’m saving this as a reference for future work.
Thanks so much!

]]>
By: Gilbert https://css-tricks.com/complete-guide-table-element/#comment-665384 Fri, 15 Nov 2013 01:52:58 +0000 http://css-tricks.com/?p=150162#comment-665384 Nice article.

I have a question, how you would make the table to have behaviors such as the DataGrid in Flex? I mean to be able to drag the borders of the columns to change their width (like in a spreadsheet as well).

]]>
By: sachin suryavanshi https://css-tricks.com/complete-guide-table-element/#comment-615140 Mon, 28 Oct 2013 09:23:29 +0000 http://css-tricks.com/?p=150162#comment-615140 Hey Hi,
I have one data in tabular structure where second column have Lorem Ipsum
Now, I want to write css on Focus of link.

Currently i wrote code and css on a:focus which is working fine except web kit browser like crome & safari.

Do we have any other alternative to implement this?

]]>