html部分：

<table><tr><td>屬性1</td><td><input type="text"></td><td>屬性2</td><td colspan="2"><input type="text"></td></tr><tr><td rowspan="2">屬性1</td><td rowspan="2"><input type="text"></td><td rowspan="2">屬性2</td><td>姓名</td><td><input type="text"></td></tr><tr><td>年齡</td><td><input type="text"></td></tr><tr><td>屬性1</td><td colspan="4"><input type="text"></td></tr> </table>

css部分：

table {width: 960px;border-collapse: collapse; /*應用于表格的樣式，合并相鄰單元格的邊框*/ } table td {height: 40px;line-height: 40px;margin: 0px;padding: 0px;font-family: "仿宋";font-size: 18px;text-align: center;line-height: 40px;border: 1px solid #ABABAB; } table input {/*可輸入區域樣式*/display: inline-block;width: 100%;height: 40px;line-height: 40px;margin: 0;padding: 0;border: none;background: none; }

要清楚rowspan和colspan的使用：

注：每一種顏色代表每一行，也就是tr標簽里面的內容，綠色那一行包含了屬性1，屬性2，姓名；而藍色的那一行只包含了年齡，這是因為屬性1和屬性2已經使用了rowspan="2"，占了上下兩個單元格，所以藍色一行只有兩個單元格可展示，而且只能展示在姓名下面，只有那兩個單元格是沒有被占用的；對于最后一行紫色那行，屬性1右邊的內容占了4個單元格，所有用了colspan="4"
效果如下：

總結

以上是生活随笔為你收集整理的表格如何调出好看的样式？的全部內容，希望文章能夠幫你解決所遇到的問題。

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