Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Align text in a table header

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?

like image 639
Michael Z Avatar asked Dec 21 '12 14:12

Michael Z


People also ask

How do I align text in a table header?

To center align text in table cells, use the CSS property text-align. The <table> tag align attribute was used before, but HTML5 deprecated the attribute.

How do I align text to the top of a table?

To place an item at the top or bottom of its cell, insert the "VALIGN=" attribute within the code for that cell. To vertically align an entire row (e.g., placing all data in that row at the tops of the cells), insert the "VALIGN=" attribute within the code for that row.

How do I align text in a table?

Select the text and go to the Layout tab and the Alignment section of the ribbon. Choose “Align Center.” Your text will then be right in the middle of the cell. Centering the text in your Word table is a simple task whether horizontally, vertically, or both.

How do I align the contents of a header?

To set the heading alignment in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <h1> to <h6> tag, with the CSS property text-align. HTML5 do not support the align attribute of the heading tag, so the CSS style is used to set alignment.


1 Answers

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.

like image 115
topcat3 Avatar answered Sep 19 '22 13:09

topcat3