HTML中＜table＞标签属性，1.水平对齐和2.垂直对齐。（表格）

原创已于 2022-07-06 15:04:21 修改 · 3.1w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #servlet #java

于 2017-03-06 21:35:44 首次发布

HTML新手学习专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了HTML中<table>标签的对齐属性，包括如何实现表格内容的水平和垂直对齐。通过学习，读者将掌握如何使用不同的属性设置，以达到理想的表格元素布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--水平对齐-->
<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
        <title>表格属性（水平对齐和垂直对齐）</title>
        <base target="_self">
    </head>
    <body>
    	<!--系统默认的格式：水平方向上居左，垂直方向上是居中-->
    	<table border="1" width="300px" height="100px">
        	<tr>
            	<td>北京</td>
                <td>上海</td>
            </tr>
            <tr>
            	<td>深圳</td>
                <td>广州</td>
            </tr>
        </table>
        <br>
        <br>
        <br>
        <!--表格整体居中（table中的align="center/left/right"）,整行里面的内容居中(tr标签里面的属性align="center/left/right"),单元格内容居中（td标签中添加属性align=""center/left/right）-->
        <table border="1" width="300px" height="100px" align="center">
        	<tr align="center">
            	<td>北京</td>
                <td>上海</td>
            </tr>
            <tr>
            	<td align="center">深圳</td>
                <td>广州</td>
            </tr>
        </table>
    </body>
</html>


<!--垂直对齐-->
<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
    	<title>表格属性（垂直对齐）</title>
        <base target="_self">
    </head>
    <body>
    	<table border="1" width="300px" height="100px">
        	<tr>
            	<td>北京</td>
                <td>上海</td>
            </tr>
            <tr>
            	<td>深圳</td>
                <td>广州</td>
            </tr>  
          </table>  
          <br>
          <br>
          <br>
          <br>
          <!--table不能有垂直对齐属性（垂直方向上无法居中、居上、居下），表格中一行的数据垂直方向上居中居上居下（tr标签中添加valign="center/top/bottom"）,单元格中的数据居上居中居下（在td标签中添加属性valign="center/top/bottom"）-->
          <table border="1" width="300px" height="100px">
        	<tr valign="top">
            	<td>北京</td>
                <td>上海</td>
            </tr>
            <tr>
            	<td valign="top">深圳</td>
                <td>广州</td>
            </tr>  
          </table>         
    </body>
</html>