HTML bordercolor Attribute β A Complete Guide with Examples and Best Practices
What is the bordercolor Attribute in HTML?
The bordercolor
attribute was used in older versions of HTML (before HTML5) to set the color of table borders. However, this attribute is deprecated in HTML5. The recommended modern approach is to use CSS (border
and border-color
).
πΉ Note: While
bordercolor
still works in some older browsers, it is better to use CSS for compatibility with modern web standards.
Step-by-Step Guide to Using bordercolor in Tables
Step 1: Applying bordercolor
to a Table
<table border="5" bordercolor="red">
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
πΉ Output: The table border will be red.
Step 2: Applying bordercolor
to Table Rows (<tr>
)
<table border="5">
<tr bordercolor="blue">
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
πΉ Output: The first row’s border will be blue, but this may not work consistently in modern browsers.
Step 3: Applying bordercolor
to Individual Cells (<td>
or <th>
)
<table border="5">
<tr>
<td bordercolor="green">Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td bordercolor="purple">Cell 4</td>
</tr>
</table>
πΉ Output: Some browsers may not support bordercolor
inside <td>
. Modern CSS is recommended.
Modern Alternative: Using CSS for Border Colors
Since bordercolor
is deprecated, the best practice is to use CSS to style table borders.
Using CSS Instead of bordercolor
<style>
table {
border: 5px solid red; /* Table border color */
border-collapse: collapse;
}
td, th {
border: 3px solid blue; /* Cell border color */
padding: 10px;
text-align: center;
}
</style>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
πΉ Advantages of Using CSS:
β
Works in all modern browsers.
β
More flexible and customizable.
β
Allows for advanced styling (e.g., dashed, dotted, or double borders).
Best Practices for Table Borders
β
Use border-collapse: collapse;
to merge adjacent borders.
β
Use CSS instead of bordercolor
for modern web development.
β
Use consistent color schemes for readability.
Common Mistakes to Avoid
β Using bordercolor
in HTML5 β itβs deprecated.
β
Use CSS border-color
instead.
β Forgetting border-collapse: collapse;
β it prevents double borders.