The content of the table in HTML is displayed horizontally and vertically in the center-HTML Tutorial-php.cn

Table of Contents

title

Home

Web Front-end

HTML Tutorial

The content of the table in HTML is displayed horizontally and vertically in the center

不言

Jun 05, 2018 pm 04:34 PM

html table

This article mainly introduces the relevant information on the horizontal and vertical centering of the content of the table table in HTML. Friends in need can refer to the following

Specify in the CSS style file

#class td /*设置表格文字左右和上下居中对齐*/ 
{  
    vertical-align: middle;
    text-align: center;  
}
/*class 是所属的类*/
<p id="class" align="center" style= "margin: 0cm 0cm 0pt; text-align: left">                                                                      
<table class="table table-bordered" border="1" width="100%" style="font-size: 14pt; color: #000000; font-family: 楷体;mso-ascii-font-family: &#39;times new roman&#39;; mso-hansi-font-family: &#39;times new roman&#39;">                                                             
<caption><h2 id="title">title</h2><
/caption>                                                              
<tbody >                                                                 
<tr style="font-weight: bold;mso-bidi-font-size: 12.0pt;font-family: 宋体;" >                                                                      
<td>序号</td>                                                                      
<td>适用情况</td>                                                                      
 <td>详情</td>                                                                       
<td>备注</td>                                                                   
 </tr>                                                                                                                                       
<tr>                                                                    
<td>1</td>                                                                     
<td>xxxxx</td>                                                                      
<td style="text-align: left;"> <!--指定靠左对齐-->                                                                     
 <span>                                                                             
xxxxxx<br>                                                                                                                                                        
</span>                                                                      
</td>                                                                       
<td><a href="#">查看详情</a>
</td>                                                              
</tr>                                                
</tbody>                                                          
</table> 
</p>

Copy after login

The above is to specify the id as class in p, then the attribute td of the table uses the style specified in css, as shown roughly in the figure

The content of the table in HTML is displayed horizontally and vertically in the center

Related recommendations:

Html realizes the report effect of dynamically displaying color blocks (example code)

The above is the detailed content of The content of the table in HTML is displayed horizontally and vertically in the center. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn