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.
We have to basically deal with the <td> elements.
There can be two ways:
.table td { text-align: center; }
<!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> <br> <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>
<!DOCTYPE html> <html> <head> <title>Page Title</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 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>