In previous Web development columns, I introduced a number of ways to work with HTML tables, although the way you use tables to lay out your pages is no longer fashionable, but you can still use tables to display table column data.
There are a number of ways to display and style tables, and in this article I'll show you how to style table borders using CSS.
links
The CSS2 table model is based on an HTML 4.01 table model. The table contains an optional anchor tag and cell as well as rows of data, and the table model contains the following elements: tables, anchors, data rows, data row groups, data columns, data column groups, and cells. This article will focus on the border handling methods for each element in the table.
Border
Depending on your requirements, you can apply different borders to tables and cells. You can define the borders of the entire table, or you can define individual cells separately. The border property of a CSS can specify the size of the border and the color and type. The following code defines a solid black line border with a width of 5 pixels:
TABLE {5px solid black;}
In addition, you can use the same syntax to specify border properties for individual cells in a table. You can use the following property values to define the border type:
L None: Specifies that the table has no border, so the border width is 0.
L Dotted: A table border made up of dotted lines.
L Dashed: A table border made up of dashed lines.
L Solid: A table border made up of solid lines.
Double: A table border made up of double solid lines.
L Groove: Groove effect border.
L Ridge: Ridge line Effect border, and groove line effect is opposite.
L Inset: Inner concave effect border.
L Outset: External convex effect border, and the inner concave effect is opposite.
Each border type can specify a color, and the border is drawn on the background color, and list a uses border properties to style the entire table as well as the anchor tag and individual cells.
<style type= "Text/css" >
TABLE {
Background:blue;
Border-collapse:separate;
Border-spacing: 10pt;
border:5px solid red; }
TD, TH {
Background:white;
Border:inset 5pt;
Horizontal-align:right; }
CAPTION {Border:ridge 5pt blue;}
</style><body>
<table summary= "Techrepublic.com-tables and CSS" >
<caption>first Quarter sales</caption>
<thead><tr>
<thabbr= "Salesperson" scope= "col" >Person</th>
<thabbr= "Sales" scope= "col" >Sales</th>
</tr></thead>
<tbody><tr>
<td>mr. smith</td>
<td>600.00</td>
</tr><tr>
<td>mr. jones</td>
<td>0000.00</td>
</tr><tr>
<td>ms. williams</td>
<td>0000.00</td>
</tr></tbody>
<tfoot><tr>
<TD colspan= "2" >let ' s sale, sale, sale!</td>
</tr></tfoot></table></body>
List A
This example shows a lot of options for using the table border, and you can use the units of measure (pixels, points, governors, and so on) that you are familiar with. To set the dimensions of a border, you can use hexadecimal values or color names to specify the border color. The following example shows a way to define a border.
border:5px solid red;
The definition of width, style, and color attributes is fused in this statement, but you can also define these elements separately, as follows:
border-width:5px;
Border-style:solid;
border-color:red;
In addition to defining a table as a whole, you can also define the four parts of a table border, including the top, bottom, left, and right. The code in List B divides the table in the example that you just described into four separate sections.
<style type= "Text/css" >
TABLE {
Background:blue;
Border-collapse:separate;
Border-spacing: 10pt;
border-top:15px solid red;
border-left:15px solid red;
border-right:5px dashed black;
border-bottom:10px dashed blue; }
TD, TH {
Background:white;
Border:outset 5pt;
Horizontal-align:right; }
CAPTION {
Border:ridge 5pt Blue;
Border-top:ridge 10pt Blue;
</style><body>
<table summary= "Techrepublic.com-tables and CSS" >
<caption>first Quarter sales</caption>
<thead><tr>
<thabbr= "Salesperson" scope= "col" >Person</th>
<thabbr= "Sales" scope= "col" >Sales</th>
</tr></thead>
<tbody><tr>
<td>mr. smith</td>
<td>600.00</td>
</tr><tr>
<td>mr. jones</td>
<td>0000.00</td>
</tr><tr>
<td>ms. williams</td>
<td>0000.00</td>
</tr></tbody>
<tfoot><tr>
<TD colspan= "2" >let ' s sale, sale, sale!</td>
</tr></tfoot></table></body>
List B
You may notice that the border of the entire caption element is defined as a blue 5-point Ridge effect, while the top of the caption border is set to 10 points. If a separate border setting (left, right, top, bottom) appears later, it will overwrite the original overall border setting.
In addition, in the previous example, by assigning the border properties of a TABLE element, you can implement multiple borders (anchor tags, table bodies, headers, individual cells, and so on) in a table.
Border Spacing
You can specify the distance between adjacent cells by using the Border Spacing property. You can specify one or two values, and if a value is specified, both horizontal and vertical spacing will use this value, and if two values are specified, the first value specifies the horizontal spacing and the second values specify the vertical spacing. These values cannot be negative, and I used the 10-point spacing value in this example.
table Behavior
The collapse property of the border sets the table's border model, the default value of which is a separate border model, and the separate border model uses the Border-spacing property as the spacing between the different borders, which uses a TABLE element as the fill background.
For the border model, the World Wide Web Consortium (Wide) defines the following rules for resolving table-style conflicts:
L Use the border of the ' hide ' border property to take precedence over the other border properties, and any border using the ' hidden ' property will have higher precedence than the other border properties.
L use a ' no style ' border with the lowest precedence and the table border is ignored if the border property of all elements in the same position is ' no style '. (Note that ' no style ' is the default value for the border style.) ）
L If there is no style set to ' hide ' and at least one style is not set to ' no style ', then the wide border has precedence over the thin border. The precedence of the border style is as follows: Double solid line, solid line, dashed line, Dot, Ridge line, outer convex, groove line, lowest level is concave.
L If the border style has only a different color, the cell has a higher precedence than the row, and is higher than the row group, column, column group, and entire table.
Border
Tables, like other HTML elements, have many CSS style options. A good example of the borders of tables and cells is that CSS should be able to meet your needs for table styles. However, tables formatted with CSS display different effects in different browsers, so extensive testing is required.
Are you a ' fan ' of CSS? What options do you use in the style of an HTML table? Share your experience in the discussion section of the article.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
