Discuss CSS Tables in detail?

Web Development
,
#1

The table is nicely marked up, easily stylable, and accessible, thanks to features such as scope, <caption>, <thead>, <tbody>, etc.

The first thing we need to do is sort out the spacing/layout — the default table styling is so cramped! To do this, add the following CSS to your style.css file:

The most important parts to note are as follows:

  • A table-layout value of fixed is generally a good idea to set on your table, as it makes the table behave a bit more predictably by default.
  • A border-collapse value of collapse is standard best practice for any table styling effort. By default, when you set borders on table elements, they will all have spacing between them.
  • Padding on the and elements — gives the data items some space to breathe, making the table look a lot more legible.