HTML / HTML Tables
Adding Borders and Padding to Tables
This tutorial will guide you through adding borders and padding to your HTML tables. These styling options can make your tables easier to read and more visually appealing.
Section overview
5 resourcesCovers the creation and styling of tables in HTML.
Introduction
This tutorial aims to guide you through the process of adding borders and padding to your HTML tables. These are essential styling techniques that can enhance the readability and visual appeal of your tables.
By the end of this tutorial, you will be able to:
- Add borders to your HTML tables.
- Add padding to your HTML tables.
Prerequisites: For this tutorial, you should have a basic understanding of HTML and CSS.
Step-by-Step Guide
HTML tables are a great way to present data in a structured and organized manner. However, without borders and padding, the data can look cluttered and difficult to read. Luckily, CSS allows us to style our tables with borders and padding.
Borders
Borders define the boundary of the table and its cells. You can set the border property to any valid CSS unit of measure (e.g., px).
Padding
Padding is the space between the content of a cell and its border. Like the border property, you can set the padding property to any valid CSS unit of measure.
Code Examples
Example 1: Adding Borders
Here's a basic example of how to add a border to a table.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
</body>
</html>
In this example, we added a 1px solid black border to the table, th, and td elements.
Example 2: Adding Padding
The following example shows how to add padding to table cells.
<!DOCTYPE html>
<html>
<head>
<style>
th, td {
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
</body>
</html>
Here, we added 15px of padding to the th and td elements.
Summary
In this tutorial, we learned how to add borders and padding to HTML tables using CSS. The border property defines the boundary of the table and its cells, while the padding property adds space between the content of a cell and its border.
For further learning, consider exploring other CSS properties that can improve the appearance of your tables, such as text-align, color, and background-color.
Practice Exercises
- Create a table with 2 rows and 2 columns. Add a 2px solid black border to the table and its cells.
- Add 20px of padding to the cells in the table from exercise 1.
- Create a table with 3 rows and 3 columns. Add a 3px dashed red border to the table and its cells. Add 10px of padding to the cells.
Solutions:
1.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
padding: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 3px dashed red;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>25</td>
</tr>
</table>
</body>
</html>
Remember, the key to mastering HTML and CSS is consistent practice. Try to create more tables and experiment with different border styles and padding values. Happy coding!
Need Help Implementing This?
We build custom systems, plugins, and scalable infrastructure.
Related topics
Keep learning with adjacent tracks.
Popular tools
Helpful utilities for quick tasks.
Latest articles
Fresh insights from the CodiWiki team.
AI in Drug Discovery: Accelerating Medical Breakthroughs
In the rapidly evolving landscape of healthcare and pharmaceuticals, Artificial Intelligence (AI) in drug dis…
Read articleAI in Retail: Personalized Shopping and Inventory Management
In the rapidly evolving retail landscape, the integration of Artificial Intelligence (AI) is revolutionizing …
Read articleAI in Public Safety: Predictive Policing and Crime Prevention
In the realm of public safety, the integration of Artificial Intelligence (AI) stands as a beacon of innovati…
Read articleAI in Mental Health: Assisting with Therapy and Diagnostics
In the realm of mental health, the integration of Artificial Intelligence (AI) stands as a beacon of hope and…
Read articleAI in Legal Compliance: Ensuring Regulatory Adherence
In an era where technology continually reshapes the boundaries of industries, Artificial Intelligence (AI) in…
Read article