A Smarter Way To Learn HTML & CSS(2015)

44
Tables: borders

You can create a table with borders or without. Here’s a table where all the cells have borders.

This is the CSS code.

th, td {
border: 1px solid black;
}

By specifying 1px solid black I’m asking for a solid black line of minimal—1-pixel—width. For a heavier line, increase the pixel number. For another type of line, specify dotted or one of the other border styles covered in Chapter 17.

By default, browsers add a little space between cells, as in the table shown above. This creates gaps between the hairline borders. If you don’t want those gaps, add a specification for the table:

table {
border-collapse: collapse;
}

This is the result.

By default, browsers don’t draw a border around anything. If you don’t want borders, there’s nothing to code. But with CSS you can add borders anywhere you like. For example, here’s a table with top and bottom borders framing the table headers.

Here’s the CSS code.

th.top-row {
border-top: 1px solid black;
border-bottom: 1px solid black;
}

The first seven lines of HTML would be…

<table>
<tr>
<th class="top-row" scope="col"></th>
<th class="top-row" scope="col">Gym</th>
<th class="top-row" scope="col">Exercise Room</th>
<th class="top-row" scope="col">Pool</th>
</tr>
[etc.]

The only reason I have to define a special class of <th> is that I’ve also got <th>s running down the left side of the table, denoting times. Since I don’t want borders on these, I need to make a distinction for <th>s that have column scope. Otherwise, I could just write…

th {
border-top: 1px solid black;
border-bottom: 1px solid black;
}

To create left and right borders use border-left and border-right. For example, suppose you want heavy orange borders defining the left and right edges of certain tables.

This is the code.

table.standout {
border-left: 5px solid orange;
border-right: 5px solid orange;
}

The first line of HTML would be…

<table class="standout">

In your CSS file specify borders for all cells. Eliminate space between borders. Save the file. Display the page. Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-44-1.html. Find the interactive coding exercises for this chapter at: http://www.ASmarterWayToLearn.com/htmlcss/44.html