HTML Tables



HTML Tables

Last Updated Jul 21, 2015, 12:00:06 PM

Tables in HTML can be used for structuring and formatting tabular data, similar to the display capabilities of spreadsheet software. Tables are useful for organizing and relating quantitative and qualitative data sets

Ideally, tables should only ever be used for tabular data. Once you learn about tables, it might be tempting to use them for page layout, but you shouldn't ever do this unless you have to. Page layout should be a combination of well-structured HTML combined with CSS.

Example HTML Table


Try It Now

HTML Table with Border(Bad Practice)

You can specify the border of a table using the border property, however using specifying the border property like below is not a good practice and it is recommended not to use like below by w3c


Try It Now

border
Usage note:  Do not use this attribute, as it has been deprecated and the <table> element should be styled using CSS. To give an effect similar to the border attribute, use the CSS properties border, border-color, border-width and border-style should be used..

HTML Table with Border(Good Practice)

CSS
Try It Now

HTML Table with Cell Padding(Bad Practice)

This attribute defines the space between the content of a cell and the border, displayed or not, of it. If it is a pixel length, this pixel-sized space will be applied on all four sides; if it is a percentage length, the content will be centered, and the total vertical space (top and bottom) will represent this percentage. The same is true for the total horizontal space (left and right).

Example
Try It Now

If you do not specify a padding, the table cells will be displayed without padding.



Cellpadding
Usage note: Do not use this attribute, as it has been deprecated and the table element should be styled using CSS. To give an effect similar to the border attribute, use the CSS property border-collapse with the value collapse on the  <table> element itself, and the property padding on the <td>.

HTML Tables Cell Padding(Good Practice)

It is the developers best practice to keep the styles and paddings of html table in between the css tyles tags. Recommanded practice by the w3c


HTML
Try It Now



HTML Table Headings (Bad Practice)

Table headings are defined with the <th> tag.

By default, all major browsers display table headings as bold and centered:


Try It Now

HTML Table Headings (Good Practice)

CSS
HTML
Try It Now

HTML Table with Rows

HTML table can have any no of rows to display the data in rows and columns


Try It Now

HTML Tables with Colors

As we alraedy know, that we can style the html elements with different colors, we can also style the html tables with different colors

Try It Now



Browser Support
Property
Tables (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)


Practice with Our Interactive Live Code Editor and Take your HTML Skills to the next level

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5

Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and w3C

Last Updated Jul 21, 2015, 12:00:06 PM