HTML Table Border (Detailed Explanation)
Definition
An HTML table border is a line that surrounds a table and its cells to separate and organize data. Borders make tables easier to read and improve their appearance. In modern HTML, table borders are created using CSS instead of the old border attribute.
Syntax (Using CSS)
<style>
table, th, td {
border: 2px solid black;
}
</style>
-
border– Shorthand property for setting the border. -
2px– Border thickness. -
solid– Border style. -
black– Border color.
Example 1: Simple Table with Border
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ali</td>
<td>20</td>
</tr>
<tr>
<td>Ayesha</td>
<td>22</td>
</tr>
</table>
</body>
</html>
Example 2: Border with border-collapse
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>101</td>
<td>Ahmed</td>
<td>85</td>
</tr>
</table>
</body>
</html>
Result: The borders of adjacent cells are merged into a single border, giving the table a cleaner look.
Border Properties
| Property | Description | Example |
|---|---|---|
border | Sets width, style, and color | border:1px solid black; |
border-width | Sets border thickness | border-width:2px; |
border-style | Sets border style | solid, dashed, dotted |
border-color | Sets border color | red, blue, green |
border-collapse | Merges adjacent borders | collapse |
padding | Adds space inside cells | padding:10px; |
Common Border Styles
-
solid– Single solid line -
dotted– Dotted line -
dashed– Dashed line -
double– Double line -
groove– Carved 3D border -
ridge– Raised 3D border -
inset– Embedded appearance -
outset– Raised appearance -
none– No border
Example:
border: 2px dashed blue;
Old HTML Border Attribute (Deprecated)
Older HTML used the border attribute:
<table border="1">
This method is deprecated and should not be used in modern web development. CSS is the recommended approach.
Advantages of Table Borders
- Makes data easy to read.
- Clearly separates rows and columns.
- Improves the appearance of tables.
- Highlights important information.
- Can be customized with different colors, widths, and styles.
Summary
An HTML table border is used to draw lines around a table and its cells. While older HTML used the border attribute, modern web pages use CSS with properties such as border, border-style, border-width, border-color, and border-collapse to create attractive and well-formatted tables.
0 Comments