網頁默認是流布局,不能夠隨意擺放位置。

表格的作用就是用來做頁面布局。

?

?單元格中數據的對齊方式:

? 對齊分為水平對齊和垂直對齊

? 水平對齊是:align=center,left, right

? 垂直對齊是:valign=top, middle, bottom

?

? 間距和填充

? ? 單元格間距: 單元格和單元格之間的距離。默認2像素 ? ? ? cellspacing

? ? 單元格填充: 內容距離單元格邊框的距離。 默認1個像素 ?cellpadding

? ??

<table border="1px" height="200px" width="600px" bordercolor="#FF0000" cellspacing="0px" cellpadding="0px" align="center" ><tr><th>姓名</th><th>性別</th><th>職業</th></tr><tr><td valign="top" >賈寶玉</td><td align="center">男</td><td align="right" valign="bottom" >少爺</td></tr><tr><td>孫悟空</td><td>男</td><td>大師兄</td></tr></table>

合并單元格

? ?合并單元行:把不同的行合并成一行

? ?合并單元列: 把不同的列合并成一列?

<table border="1px" width="500px" height="400px" align="center"><tr><th colspan="3">名著</th></tr><tr><td width="30%">紅樓夢</td><td width="30%">曹雪芹</td><td align="center" rowspan="4">明<br/><br/>清</td></tr><tr><td>水滸傳</td><td>施耐庵</td></tr><tr><td>三國演義</td><td>羅貫中</td></tr><tr><td>西游記</td><td>吳承恩</td></tr></table>

?

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的前端三十二:表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。