How to Freshen up HTML Tables with CSS

In the early days of the Internet, programmers and designers tried to use HTML to add style and formatting to their web pages. They were never very successful because HTML was designed to control the layout and structure of web pages, not to make them look attractive. Eventually, Cascading Style Sheets were developed to control the style and formatting of pages. Just learning a few CSS styles can go a long way in making your web pages more presentable. Let’s take a closer look at how you can use styles to drastically improve the look of HTML tables. We’ll start with this plain and boring HTML table:



Step 1 – Add a
Step 2 – We’ll use an id selector to apply styles to the table. To do this, we need to add the id to the table tag. Change the tag to:

Step 3 – Now we’ll create the “csstable” styles within the style tag. Put the code below inside the style tag and read the comment lines that start with “//” to understand what each row does.

the #csstable tells the browser to look for an element with id=”csstable”and apply the styles to it

#csstable {
//creates a thin, solid blue border around the outside of the table
border: 1px solid #89DEFF;
//removes the spaces between the table cells
border-collapse: collapse;
}

special styles for the elements in the table

#csstable th {
//sets the background color to blue
background-color: #B2DCED;
//creates 5 pixels of space between the content and the borders of the table cells
padding: 5px;
}

special styles for the elements in the table

#csstable td {
//creates 5 pixels of space between the content and the borders of the table cells
padding: 5px;
//creates a thin, solid blue border around each table cell
border: 1px solid #B2DCED;
}

Step 4 – Now let’s add one more style to make every other row in the table have a colored background. We’ll use a CSS class selector for this. Add the following rows inside the