Table Styling

[sfrisk]

Base styling for tables

[samatdav]

There are some popular table styles. Is there something that can be used from them?

1. Bootstrap
   http://getbootstrap.com/css/#tables
2. Purecss
   http://purecss.io/tables/

[geekman-rohit]

As far as Tables are concerned, I love what bootstrap does, its neat and clean and systematic
classes like table, table-striped, table-bordered makes sense.
We should start running tests for tables of different frameworks and compare maybe?
I have used bootstrap for quite a long time now, and it's tables ad buttons are what I like the most about bootstrap.

Especially Bootstrap's responsive-table : http://getbootstrap.com/css/#tables-responsive
It scrolls neatly on small screens. Something we should definitely have.

Semantic UI does something similar. http://semantic-ui.com/collections/table.html#responsive
But what it later does is provide classes like table-colored , inverted, which can be achieved by only a few lines of css anyways.

We should keep it simple and limited to things that are essential: , and a concern for a developer to do it properly.

1. table
2. table-compact
3. table-responsive
4. table-bordered
5. table-striped

Table-bordered is essential. Some Beginner CSS developers often find it troublesome to find best way to border tables without causing double borders at cell boundries.

[prasunanand]

Tables must be supporting these features:

1. Bordered
   2.Celled
   3.Compact
   4.Responsive
   5.Striped
   6.Contextual rows, columns and cells(error , warning , active, disabled,icon support)

The first 5 can be achieved by adding the class to the tables.
Contextual rows and cells can be made by providing the class names to them . Also we need to provide the flexibilty of how the devs want to modify their rows or columns or cells.

[prasunanand]

Adding to this ,The concept of "Sortable Tables" would be very useful in CRUD based web applications

[hirenmayani]

@prasunanand, Don't you think we'll require js for 'sortable table'. And we're not going to use it in css-chassit.

[arschmitz]

Something i would like to see for tables is support for responsive table styles like in jquery mobile we have. http://demos.jquerymobile.com/1.4.5/table-reflow/ and jquery-archive/jquery-mobile#7700 a request for better styling on those

[prasunanand]

@arschmitz ,Responsive tables would definetly be nice.
@hirenmayani We can use data attributes to sort tables. http://html5doctor.com/html5-custom-data-attributes/

[geekman-rohit]

@prasunanand , they are just attributes, we still need javascript to access them and do actual sorting, they provide a clearer mechanism to provide data! and we arent relying on html5 yet, I think.

[sfrisk]

I think the data attribute is closer aligned with the UI toolkit phase than css framework. The point of Phase One is that Javascript isn't required to make anything work.

[arschmitz]

@geekman-rohit data attributes work in all browsers the only difference is how you access them.

[geekman-rohit]

@arschmitz , agreed, my point was they won't help in actual sorting without javascript, and we aren't considering javascript for phase one. But I stand corrected on the other point about not relying on html5 yet. Thanks

[MelodyCuida]

will you consider styles for cross-table?

[sfrisk]

Having <td> that can cover multiple rows/columns should definitely be considered in styling.

[hirenmayani]

@sfrisk are talking about rowspan and colspan by that covers multiple rows/columns?

[sfrisk]

correct, @hirenmayani

[hirenmayani]

@sfrisk what difference does it make than single row/column (designing point of view)? Is it for making table responsive?

[sfrisk]

@hirenmayani Depends on the content of your table, but it would be important to test those cases to make sure the table is still visually pleasing.

[MichaelArestad]

Let's start simple. Let's get styles for the most basic table squared away first keeping the bordered/other variations in mind. I lean toward having the leanest styles possible. Some basic font styling and padding. Potentially a key border or two.

I absolutely do not want to go to the extent bootstrap does with all of the modifiers (though, of the two, it has the better styling).

I just put together a PR for this. #69

[sfrisk]

Agree on the Bootstrap point - while they do have excellent styling, I think that sometimes they offer a little too much to use. I think the goal should be some basic styling, that would be easy for someone to build off of.