Align text in a table header
HtmlHtml TableHtml Problem Overview
It seems align
is not working for the th element. Here is my HTML:
<div style="width: 100%; height: 175px; overflow: auto;">
<table class="grid" id="table">
<thead>
<tr>
<th class="not_mapped_style" style="display: none;" align="center">id</th>
<th class="not_mapped_style" align="center">DisplayName</th>
<th align="center">PrimaryEmail</th>
<th align="center">Age</th>
<th align="center">Phone</th>
</tr>
</thead>
<caption>Contacts</caption>
<tbody>
<tr>
<td style="display: none;" property_value="0" property_name="id" align="center">0</td>
<td property_value="rpcuser" property_name="DisplayName" align="center">rpcuser</td>
<td property_value="[email protected]" property_name="PrimaryEmail" align="center">[email protected]</td>
<td property_value="69" property_name="Age" align="center">69</td>
<td property_value="+722616807" property_name="Hand_Phone" align="center">+18007</td>
</tr>
</tbody>
</table>
</div>
Text aligning is working just fine for the td
elements but fails for the th
. Why?
Html Solutions
Solution 1 - Html
Try:
text-align: center;
You may be familiar with the HTML align attribute (which has been discontinued as of HTML 5). The align attribute could be used with tags such as
<table>, <td>, and <img>
to specify the alignment of these elements. This attribute allowed you to align elements horizontally. HTML also has/had a valign attribute for aligning elements vertically. This has also been discontinued from HTML5.
These attributes were discontinued in favor of using CSS to set the alignment of HTML elements.
There isn't actually a CSS align or CSS valign property. Instead, CSS has the text-align which applies to inline content of block-level elements, and vertical-align property which applies to inline level and table cells.
Solution 2 - Html
Try to use text-align in style attribute to align center.
<th class="not_mapped_style" style="text-align:center">DisplayName</th>
Solution 3 - Html
Try using style for th
th {text-align:center}
Solution 4 - Html
If you want to center the th of all tables:
table th{ text-align: center; }
If you only want to center the th of a table with a determined id:
table#tableId th{ text-align: center; }
Solution 5 - Html
In HTML5, the easiest, and fastest, way to center your <th>THcontent</th>
is to add a colspan
like this:
<th colspan="3">Thcontent</th>
This will work if your table is three columns. So if you have a four-column table, add a colspan
of 4, etc.
You can manage the location furthermore in the CSS file while you have put your colspan
in HTML like I said.
th {
text-align: center; /* Or right or left */
}
Solution 6 - Html
HTML:
<tr>
<th>Language</th>
<th>Skill Level</th>
<th> </th>
</tr>
CSS:
tr, th {
padding: 10px;
text-align: center;
}
Solution 7 - Html
For inline css (which which you really shouldn't do), you should do it like this:
<th style="text-align: center;">I'm a heading!</th>
The answers provided by others above tell you how to do it in a css file, which is a better practice. Using inline styling can make things harder to read and harder to expand. Not to mention, harder to debug. (gotta maintain separation of concerns).
Solution 8 - Html
Your code works, but it uses deprecated methods to do so. You should use the CSS text-align
property to do this rather than the align property. Even so, it must be your browser or something else affecting it. Try this demo in Chrome (I had to disable normalize.css to get it to render).
- Source: http://jsfiddle.net/EDSWL/
- Demo: http://jsfiddle.net/EDSWL/show
Solution 9 - Html
For me none of the above worked. I think it is because I have two levels of header and a fixed width on level 1. So I couldn't align the text inside the corresponding columns on level 2.
+---------------------------+
| lvl 1 |
+---------------------------+
| lvl 2 col a | lvl 2 col b |
+---------------------------+
I had to use the combination of width:auto and text:align-center :
<th style="width:auto;text-align:center">lvl 2 col a</th>
<th style="width:auto;text-align:center">lvl 2 col b</th>
Solution 10 - Html
I had to put my th text inside a div with display: flex
in order for the text to be middle aligned.
<th style="width: 15%;">
<div style="width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center">
Blah blah blah
</div>
</th>