لطفا منتظر باشید ...
Changing the Border
Hardly anyone uses table borders in layout tables, but just about everyone uses table borders in data tables. The table's border attribute controls the thickness of the border, and the bordercolor attribute determines the color:
<table border="5" bordercolor="#000000">
GEEKSPEAKRules are the interior borders of a table. They retain their standard thickness, no matter the value in the border attribute, but they appear in the table border's color. |
Figure 56.6. This table has a five-pixel, black (#000000) border.
[View full size image]
By setting the rules attribute to cols, the browser draws rules around the columns only, as you can see in Figure 56.7. Table 56.2 summarizes the possible values of the rules attribute.
<table border="5" bordercolor="#000000" rules="cols">
Figure 56.7. Set the rules attribute of the table tag to determine how the browser draws rules. Here, the value of the rules attribute is cols.
[View full size image]
| VALUE | DRAWS RULES AROUND |
|---|---|
| all | All table cells |
| cols | Columns only |
| rows | Rows only |
| groups | Groups only: col, colgroup, thead, tfoot, and tbody |
| none | Nothing; no rules drawn |
TIPTable borders in Netscape appear with a 3D shading effect. In IE, table borders are solid. |
Figure 56.8 shows how the dotted border style looks in a browser. See Table 56.3 for more border styles.
<table border="5" bordercolor="#000000" rules="groups" style="border-style: dotted;">
Figure 56.8. Use CSS to change the style of the border.
[View full size image]
| STYLE | APPEARANCE |
|---|---|
| solid | An unbroken, solid border |
| dashed | Dashed lines |
| dotted | Dotted lines |
| double | A pair of solid borders |
| none | No border |
You can set the borders of different sides of the table to different values, as in [View full width]<table border="5" bordercolor="#000000" rules="groups" style="border-top-style: dashed;
border-bottom-style: dotted; border-left-style: double; border-right-style: none;">Figure 56.9. With CSS, the top, right, bottom, and left borders may all have different styles.
[View full size image]
| ATTRIBUTE | CONTROLS | EXAMPLE |
|---|---|---|
| border-color | The color of all four sides of the border | border-color: #FF0000; |
| border-style | The style of all four sides of the border | border-style: dotted; |
| border-width | The weight or thickness of all four sides of the border | border-width: 10px; |
| border-bottom-color | The color of the bottom border | border-bottom-color: #00FF00; |
| border-bottom-style | The style of the bottom border | border-bottom-style: none; |
| border-bottom-width | The weight or thickness of the bottom border | border-bottom-width: 8px; |
| border-left-color | The color of the left border | border-left-color: #0000FF; |
| border-left-style | The style of the left border | border-left-style: solid; |
| border-left-width | The weight or thickness of the left border | border-left-width: 5px; |
| border-right-color | The color of the right border | border-right-color: #FFFF00; |
| border-right-style | The style of the right border | border-right-style: dashed; |
| border-right-width | The weight or thickness of the right border | border-right-width: 4px; |
| border-top-color | The color of the top border | border-top-color: #FFFFFF; |
| border-top-style | The style of the top border | border-top-style: double; |
| border-top-width | The weight or thickness of the top border | border-top-width: 6px; |
