You can add borders to a table using CSS. Here’s how you can do it:
Method 1: Using CSS
You can apply borders to the <table>, <th>, and <td> elements using the border property. Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
width: 100%;
border-collapse: collapse; /* Ensures borders are merged */
}
th, td {
border: 1px solid black; /* Adds a solid black border */
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2; /* Optional: background color for headers */
}
</style>
</head>
<body>
<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>
</body>
</html>Method 2: Using HTML Attributes (Deprecated)
You can also use the border attribute directly in the <table> tag, but this method is outdated and not recommended for modern web development:
<table border="1">
...
</table>Summary
Using CSS is the preferred method for adding borders to tables, as it provides more flexibility and control over the styling. You can customize the border style, color, and width as needed.
