Adding Borders and Padding to Tables

Tutorial 4 of 5

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!