How to Center Text in HTML Table Cells?

How to Center Contents in an HTML Table Horizontally and Vertically

Centering text horizontally and vertically within the cells of an HTML table can enhance the visual appeal and readability of the page. To accomplish this, there are two methods to consider: CSS and inline style attributes.

CSS Method:

1. Define a style block in the section of the HTML document.
2. Add the following CSS:

<code class="css">td {
    text-align: center;
    vertical-align: middle;
}</code>

Inline Style Attribute Method:

1. Use the style attribute directly within the tags.
2. Set the text-align and vertical-align properties to "center" for each table cell.

Here is an example that demonstrates both methods:

<code class="html"><table border="1">
    <tr>
        <td style="text-align: center; vertical-align: middle;">Text</td>
        <td style="text-align: center; vertical-align: middle;">Text</td>
    </tr>
</table>

<table border="1" id="cssTable">
    <tr>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table></code>

In the above example, both tables will display with centered text content in all cells. The CSS method can be beneficial if you want to apply the alignment to multiple tables or reuse the stylesheet across different pages. On the other hand, inline style attributes allow for more specific control over individual cells.

The above is the detailed content of How to Center Text in HTML Table Cells?. For more information, please follow other related articles on the PHP Chinese website!