Basic CSS Tutorial
Add A Table
The really cool thing about tables and CSS is that you can control every little piece of them. The really bad thing about tables and CSS is that you have to control every little piece of them. Since I'm a lazy person, I've come up with my own way of formatting tables with the least amount of effort.In HTML, all you had to decide is whether or not you wanted a border and add a number to indicate the thickness of the border. In CSS, it's a little more complicated. BUT instead of choosing border and color information for the TABLE, you format the CELLs instead.
Add this basic table to your page (copy and paste). Then look at your browser and refresh the page (F5). You won't see anything because the cells are empty, there's no border and no background color - nothing to see. But it is taking up space on the page.
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Now go to your CSS file, to the end of the page and add some style to your table cells. There are three main pieces of a border style, the thickness of the line (width), the style and the color, and you can set all three pieces in one statement. In order to use border width and border color, you MUST use a border style.
For border style, there are many choices - dashed, dotted, double, groove, inset, outset, ridge, solid or none. For some reason, they also gave us the choice of hidden. If you don't want to show a border, the easiest thing to do is don't add one. Perhaps, if you're experimenting with your border and don't want to delete what you have when your page goes live, you can hide it until you're ready.
For width, you can use a word (thin, medium or thick) or a measurement (3px, 1em, 1in, 2%, etc). There are numerous units of measurement in CSS. The three in the example are pixels, ems, inches and percentage. Some units are absolute, like pixels and inches, they have a specific width. Some units are relative, like ems and percentages, their size is RELATED to something else. I don't recommend them for border thickness but they have good uses in other areas.
Border color is just about anything you can imagine and translate to hexadecimal. You can ask Google for the hexidecimal equivalent of salmon or even desert camo (three different colors).
I'm keeping it simple for this tutorial, you can experiment all you like.
td {
border: thin solid black;
}
Save your page and your CSS file and refresh your browser.
Since there is nothing IN our table, no size set and no table border, those little tiny boxes are our table cells.
So I put something in my boxes. The browser adjusts the sizes of the cells to accommodate the TALLEST item in each row
and the WIDEST item in each column. Now let's learn about cellpadding and
cellspacing, remember them from HTML?
How it looks. We have a table!
Previous Next