14. Table Styling

In the qualifications.html page there is an HTML table. Add the following rules to your stylesheet in main.css to style the table. You’ll also need to add the class attribute of quals to the <table>.

.quals{
    border-collapse: collapse;
}
.quals th{
    border-bottom:3px solid #ccc;
    padding:5px;
}
.quals td{
    border-bottom:1px solid #ccc;
    padding:5px;
}

The border-collapse property when set to collapse will make the table cells share borders. This allows use to style the table using the border property.

The border property forms part of the box model, a key element of CSS which we’ll investigate in the next lab.