HTML5 and CSS3 Fundamentals – Table Styles

A Definitive Guide to Using HTML TABLE STYLES

In this class, we continue our discussion on tables by looking at how you can use styles on your tables. Specifically, we’ll learn how to use CSS with our tables. You are now asking yourself this question: “why must we use CSS to format the table?” Well, that’s a good question.

The fundamental concepts upon which CSS was invented to solve remain the same. If you are a web developer, then you should have more control over any page layout and display that you are creating. Having more control means separating the content of your web page from the style.

The same principle applies to HTML tables. As a web developer, you shouldn’t focus much of your energy on the layouts and styles for your tables. CSS can handle that. Once, you separate the content that’s placed on the table with the layouts and style used, you’ll have more leverage to your web page.

Having said that, it’s important to refresh our minds again on how tables are generated in HTML. This is because we will use the same concepts, but this time round, we will focus on the layout and not the content.

Do you remember some of the attributes of the tables that we discussed which were not supported in HTML5? Well, attributes such as “align”,”border”,”width”,cellspacing” and ”cellpading” have been taken up by CSS.

In this lesson, we will look at how we can format our tables with some of the attributes that I have mentioned above. So, let’s not dip so much and dive in to find out how to use an HTML table styles.

HTML Table Borders

The borders of a table can be specified by the “border” attribute of a table. In CSS, it’s possible to specify the borders for <TABLE>, <TH> and <TD>. For instance, the example below shows how a border of “2px” can be set for <TABLE>, <TH> and <TD> tags.

The border-collapse attribute of a table specifies the table borders when they are joined into a single border. For instance, the HTML code below illustrates this:

TABLE {

border-collapse: collapse;

}

Width and Height of the Table

The width and height of a table are specified in pixels or percentages. They are defined by the “width” and “height” properties respectively in CSS. For instance, in the example below, a width of 60 pixels and height of 40 pixels has been specified:

TABLE {

width: 60px;

height: 40px;

}

Cell Padding

It indicates the space that exists between the cell wall in a table and the cell content. Here’s how it can be specified in CSS:

TD {

padding: 15px;

}

Table’s Color

Here’s how the table’s background color can be set using CSS:

TABLE, TD, TH {

border: 2px solid blue;

}

TH {

background-color: cyan;

color: red;

}

GET YOUR FREE PYTHON EBOOK!