I want to perfectly center the text horizontally within a table while still aligning it to the left [Using HTML and CSS]

Question

I want to perfectly center the text horizontally within a table while still aligning it to the left [Using HTML and CSS]

I have a few tables displayed on my website and I am seeking ways to enhance their appearance.

Here is how my table currently appears (http://prntscr.com/gpa4w6)

I am aiming for this desired look (http://prntscr.com/gpa52q)

In the image above, you can notice that the text is centered within the column but also left-aligned. How can I achieve this effect?

echo "<tr><td>".$data['BanID']."</td>";
echo "<td>".$data['Name']."</td>";
echo "<td>".$data['Reason']."</td>";
echo "<td>".$data['Date']."</td></tr>";}

html css

Answer 1

Answer №1

You might be able to accomplish that by incorporating a left padding and maintaining left alignment.

Answer 2

You might be able to accomplish that by incorporating a left padding and maintaining left alignment.

Answer 3

Answer №2

In order to properly structure your table, ensure that it contains the thead, tbody, and tfoot elements. You should then style the thead th elements to be centered, and the tbody tr elements to be aligned to the left.

<table>
    <thead>
      <tr>
         <th>Content</th>
         <th>Content</th>
         <th>Content</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <th>Content</th>
         <th>Content</th>
         <th>Content</th>
       </tr>
    </tbody>
</table>

Finally, apply the following CSS for the desired effect:

table > thead > tr > th { text-align: center;}
table > tbody > tr > td { text-align: left;  }

Answer 4

In order to properly structure your table, ensure that it contains the thead, tbody, and tfoot elements. You should then style the thead th elements to be centered, and the tbody tr elements to be aligned to the left.

<table>
    <thead>
      <tr>
         <th>Content</th>
         <th>Content</th>
         <th>Content</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>Content</td>
        <td>Content</td>
        <td>Content</td>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <th>Content</th>
         <th>Content</th>
         <th>Content</th>
       </tr>
    </tbody>
</table>

Finally, apply the following CSS for the desired effect:

table > thead > tr > th { text-align: center;}
table > tbody > tr > td { text-align: left;  }

I want to perfectly center the text horizontally within a table while still aligning it to the left [Using HTML and CSS]

Answer №1

Answer №2

Similar questions

Ensuring the text is positioned centrally and at the bottom of a table cell

Alter the class following modifications to the list

What is the best way to incorporate multiple input boxes into a single alertbox for repeated use?

Ways to retrieve the precise value of a CSS attribute even when the property is overridden in a CSS class

Step horizontally to scroll varying amounts

Error in Compiling HTML Elements Collection<<Element>

Firefox is unable to render the jQuery file from ajax.googleapis.com

Finding the index number of a DIV element when it is clicked

Prevent HTML escaping inside of a code tag in JavaScript

Setting up aliases for "HTML import" paths - a step-by-step guide

Remove the float from the final list item in order to resolve display issues in Internet Explorer

Can Vuetify's grid system seamlessly integrate with the Bootstrap grid system?

Forward the jsp to the servlet before navigating to the following page

Tips for organizing the contents of nested items in alignment

Utilizing AngularJS to dynamically inject HTML content into $scope

Footer that sticks in a vuejs application

Leveraging Font Awesome and Material Icons within ngFor in Angular 2

Ensuring that links are functional across all directory levels: a comprehensive guide

What is the best way to integrate PHP code within CSS?

Is it possible to remove the left margin on an li element by placing a td element inside it using HTML and