In HTML, you can use the border attribute to control the border of a table and its elements. The border attribute can be applied to the <table>, <tr>, <th>, and <td> elements. It specifies the width of the border around these elements.
Here's an example of using the border attribute:
<!DOCTYPE html>
<html>
<head>
<title>Table Borders</title>
<style>
/* Optional CSS for better styling */
table {
border-collapse: collapse;
width: 50%;
margin: 20px;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1,1</td>
<td>Data 1,2</td>
</tr>
<tr>
<td>Data 2,1</td>
<td>Data 2,2</td>
</tr>
</table>
</body>
</html>In this example:
- The <table> tag's border="1" parameter creates a border around the whole table.
- The CSS style inside the <style> tag provides additional styling. The border-collapse: collapse; property ensures that adjacent borders are collapsed into a single border, creating a cleaner look.
- The border: 1px solid black; property in the th and td styles sets a 1-pixel solid black border around the header and data cells.
- The padding: 8px; property adds some padding inside each cell for better spacing.
Keep in mind that using CSS for styling is considered best practice in modern web development. The above example includes both the `border` attribute and CSS for illustration purposes, but you might want to use only CSS for styling in a real-world scenario.
Tags:
HTML