Tables allow us to aggregate a huge amount of data and present it in a clear and orderly way. A basic Bootstrap table has a light padding and only horizontal dividers. The base class is .table to any table,and after adding it we can extend with custom styles or our various included modifier classes to our table for the design purpose.
Placing the table text into the center using Bootstrap: By default, the text in <td> elements are always regular and left-aligned.
We have to basically deal with the <td> elements.
There can be two ways:
- By adding text-align: center; in our CSS code for the tds.
- By adding the “ text-center” class of Bootstrap 3 to a td element also works out of the box.
- By adding text-align:center in CSS code
The text-align property specifies the horizontal alignment of text in an element. So in our CSS code, we simply set the text-align property of our tds as the center, and the table text gets placed into the center.
.table td {
text-align: center;
}
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
/* setting the text-align property to center*/
td {
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Contact Numbers</th>
</tr>
<tr>
<td>Pawan Kumar</td>
<td>1234567890</td>
<td>0987654321</td>
</tr>
</table>
</body>
</html>
|
Output:
- By adding the ” text-center” class of Bootstrap 3
We can use the “text-center” class of bootstrap 3 for the center-alignment of an element. So in our td when we add “text-center” class, and then our table text goes to the center.
<td class="text-center">.......</td>
Example :
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href=
integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" href=
integrity=
"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<script src=
integrity=
"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous">
</script>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Contact Numbers</th>
</tr>
<tr>
<td class="text-center">Pawan Kumar</td>
<td class="text-center">1234567890</td>
<td class="text-center">0987654321</td>
</tr>
</table>
</body>
</html>
|
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
19 May, 2022
Like Article
Save Article