Working with Table and Cell Border Widths

A border is a visible line around the perimeter of a table and around each of the cells within the table. Unlike table and cell backgrounds, which are independent, table and cell borders are related. As you will learn in the next Tip, you can set table border and cell border colors independently. However, if you set the table’s border width to one or more pixels, the Web browser will also draw a border around each of the table’s cells. Conversely, if you set the table’s border attribute to zero, the Web browser neither draws a border around the outside of the table nor around the perimeters of any of the cells within the table.

Note that the HTML standard refers to the border around a table as the table’s frame and to the border around individual cells within the table as rules. Setting the bordercolor and/or border attribute within the <table> tag affects both the table frame and its cell rules. For example, setting border=“0” implies frame=“void” and rules=“none”—which in effect, makes all borders within and around the table invisible. When you examine Cascading Style Sheets (CSS), you will see that newer Web browsers let you control cell attributes separately from those of the table overall. As such, you will learn how to create CSS rules (not to be confused with table cell rules, which are lines) that let you specify the width and color of a table’s frame independently of the rules (that is, borders) around the table’s cells.

To increase the width of the table’s border, simply increase the number of pixels assigned to the border attribute in the table’s <table> tag. For example, to draw a 10-pixel border around a table, such as that shown next, set the border attribute’s value to “10” within a <table> tag that reads as follows:

<table border="10">

Please take note of two interesting things about the effect of changing the value of the border attribute. First, although the width of the border around the perimeter of the table increases as you increase the value assigned to the border attribute, each of the borders around the cells within the table, meanwhile, remains one pixel in width. No matter how wide you make the border around the table, most Web browsers will draw a one-pixel-wide border around each of the cells in the table—unless you set the border attribute’s value to zero, in which case neither the table nor its cells will have borders. Second, by default, Web browsers draw both table and cell borders using two colors, in an attempt to give the table (and its cells) a three-dimensional look. If using the default, gray border, the Web browser will draw the left and top sides of table using light-gray and the bottom and right side of the table as dark gray. The Web browser also uses two colors—although they’re not easy to see, given their usual one-pixel width—when drawing the borders around the cells within the table. The left side and top of each cell is dark gray, while the bottom and right side of the cell is light-gray.