1. 程式人生 > >HTML中標籤屬性,1.水平對齊和2.垂直對齊。(表格)

HTML中標籤屬性,1.水平對齊和2.垂直對齊。(表格)

<!--水平對齊-->
<!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>