The table border
The table border properties allow setting the border specification of HTML tables by using the CSS. Although you may set the table display settings by inline properties, you can also specify table border in CSS.
In this example, the table style, including the border is styled inside CSS by using the table border and other properties.
Example of using CSS table border
In this example, we will show you how to set the table border in CSS. In the example, we created a table and styled it by using CSS. The table border, heading and table data all are given different border specifications.
Normally, in the HTML tables, the borders are separate or detached. The CSS border-collapse property is used to make it collapse into a single border as shown below.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<html>
<head>
<style>
/*Using CSS border*/
table{
border-collapse: collapse;
border: 2px solid #006655;
}
table th{
border: 1px dashed black;
color: #FF8800;
}
table td{
border: 1px dotted black;
color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Employee Name</th>
<th>Emplyee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>$5000</td>
</tr>
<tr>
<td>Dave</td>
<td>$6000</td>
</tr>
<tr>
<td>Shena</td>
<td>$4000</td>
</tr>
</table>
</body>
</html>
|
As you can see, an HTML table is created which is styled using table border and other properties. The main table border is given the solid style with 2px width and its own color with border-collapse as collapse value.
The table heading <th> and <td> has its own separate border style and color specification.
Read further: CSS border
Leave A Comment?