Quick Reach
The table border
Generally, the tables are shown with the borders to distinguish information within rows and columns. However, by default no border is shown for HTML tables. i.e. if you do not specify or use border attribute it will be taken as “0”.
Note that, the border property in HTML table tag is not supported in HTML 5. Rather, you should use the border property in CSS. The examples below will show you both ways, specifying HTML table border in HTML table tag as well as in the CSS.
The syntax of border attribute is:
<table border=”1”>
If you use bigger value for the border property the border line will be thicker.
An example of HTML border
In the following example, we are using “0” value for the border. See the output by clicking the link below:
|
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
|
<html>
<head>
<title>HTML table demo</title>
</head>
<body>
<table border=“0”>
<tr>
<th>Employee Name</th>
<th>Employee Age</th>
<th>Employee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>35</td>
<td>$5000.00</td>
</tr>
<tr>
<td>Tina</td>
<td>24</td>
<td>$3500.00</td>
</tr>
</table>
</body>
</html>
|
You can see, no border line is visible in the table.
HTML border example with a bigger value
In the following example, we are going to use bigger value than “0” for the border property in HTML table. Click the link below to see its output:
|
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
|
<html>
<head>
<title>HTML table demo</title>
</head>
<body>
<table border=“2”>
<tr>
<th>Employee Name</th>
<th>Employee Age</th>
<th>Employee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>35</td>
<td>$5000.00</td>
</tr>
<tr>
<td>Tina</td>
<td>24</td>
<td>$3500.00</td>
</tr>
</table>
</body>
</html>
|
An example of table border with CSS
Using CSS, you can set the table border as well. Not only the table border but also table header and table data borders can be set separately. See the following example:
|
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
78
79
80
81
|
<!DOCTYPE html>
<html>
<head>
<style>
/*Using CSS border*/
table{
border-collapse: collapse;
border: 2px solid #006655;
}
table th{
border: 1px dashed black;
color: #FF8800;
}
table td{
padding:10px;
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, the table border, table heading <th> border and <td>’s border are set separately along with padding and other properties in the CSS block.
Using the class name of CSS for the Table border
You may refer table properties by CSS class name or by id as well. In the above example, we used direct table name, td, and tr, however, what if you have more than one tables in your web page and need different styles for each? The example below shows how to create CSS class and use it in the HTML table tag.
|
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
78
79
80
81
|
<!DOCTYPE html>
<html>
<head>
<style>
/*Using CSS table border*/
table.tableprop{
border-collapse: collapse;
border: 2px solid #006655;
}
.tableprop th{
border: 1px dashed black;
color: #FF8800;
}
.tableprop td{
padding:10px;
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>
|
The table border color
You can also define the color of HTML border by using the CSS property. The default color is black. However, to blend it to the other parts of the web page you may need to set some other color of the border of a table.
The border color of HTML table can be set by using CSS. See example below to give color to an HTML table.
Experience this 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
|
<!DOCTYPE html>
<html>
<head>
<title>HTML table demo</title>
<style>
.table, th, td
{
border:1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<th>Employee Name</th>
<th>Employee Age</th>
<th>Employee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>35</td>
<td>$5000.00</td>
</tr>
<tr>
<td>Tina</td>
<td>24</td>
<td>$3500.00</td>
</tr>
</table>
</body>
</html>
|
You an see in this line: border:1px solid red that specifies border properties as 1 pixel thick, solid line and color of the border as red. To learn more about the border color property of CSS, go to its chapter.
Also see HTML href | HTML Tutorial
Leave A Comment?