One of the main components of web development is the table. It displays the data in tabular form on a website. If the data in the table cells are too short or too long, it can cause the table to appear uneven. In order to correct this, the “padding” property is utilized for the table cells.
This post will describe:
- How to Add padding to Bootstrap Table Cells?
- How to Add padding to Bootstrap Table Cells Using CSS?
- How to Add padding to the Table?
Prerequisite: Create a Table
To create a table, follow the steps mentioned below:
- First, use the “<table>” tag and assign it the “table” and “table-striped” classes.
- Within the “<table>” element, specify the header part by using the “<thead>” element.
- Inside it, create a row “<tr>” of headings using the “<th>” tags.
- Then, create the table body section using the “<tbody>” element.
- Lastly, create rows of data by using the “<tr>” tag and “<td>” tags.
HTML
<thead>
<tr>
<th>Name</th>
<th>Course</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jake</td>
<td>Software Engineering</td>
<td>90</td>
</tr>
<tr>
<td>Tina</td>
<td>Introduction to Java</td>
<td>80</td>
</tr>
<tr>
<td>John</td>
<td>Computer Systems</td>
<td>89</td>
</tr>
</tbody>
</table>
Output
How to Add padding to Bootstrap Table Cells?
One way to add padding within the table’s cells is to use the Bootstrap padding classes. These include “p-*”, “px-*”, “py-*”, and many more.
Example
In the ongoing example, use the “px-5” class to add padding to the left and right of the headings:
<tr>
<th class="px-5">Name</th>
<th class="px-5">Course</th>
<th class="px-5">Score</th>
</tr>
</thead>
Output
How to Add padding to Bootstrap Table Cells Using CSS?
CSS offers the easiest way to add padding within every cell of the table using the “padding” property. Here is an example that demonstrates how to add padding to every table cell:
padding: 30px;
}
Output
So far, we have discussed how to add padding to table cells. In the coming part, you will learn how to adjust the padding to the table.
How to Add padding to the Table?
In CSS, add the below-stated properties to the “table” class:
border: 2px solid darkcyan;
border-collapse: separate;
padding: 20px;
}
Here:
- “border” property adds a border to the element.
- “border-collapse” with the value “separate” adds a separate border around the table.
- “padding” adds space around the table’s content.
Output
We have compiled the methods to add padding to Bootstrap table cells.
Conclusion
There are several ways to add padding to a Bootstrap table’s cells. These include using the padding classes, such as “p-*”, “px-*”, and “py-*”. More specifically, the padding can also be added using CSS “padding” property. This article has explained how to add padding space to the Bootstrap table cells.
