学习笔记4——表格

 

<table height="" width="" cellspacing="" cellpadding="" border="" align="" bordercolor="">

<tr>

<td bordercolor="" colspan="" rowspan align="" valign="" bgcolor>

</td>

</tr>

</table>

cellspacing:表格内边框跟外边框的间距

cellpadding:表格当中元素跟表格边框的间距

colspan:跨多列

rowspan:跨多行

align:水平方向的对齐方式：center、right、left

valign:垂直方向的对齐方式：top、bottom

<tr></tr> 通常是指一行

<td></td> 通常是指一列

表格所有元素都写在<td></td>当中，tr只是表示有一行存在，table的bordercolor设置外边框颜色，td的设置内边框，若td无设置则跟外边框一样。设置某一单元格的属性只能在td内设置，不能在tr设置。标签套用依然适合。

行1列1	行1列2
行2列1	行2列2

 

细线表，把height设置为1，且td里面无元素。

 

<table border="0" cellspacing="0" cellpadding="0" align="center">

<tr>

<td height="1" bgcolor="#FF0000"></td>

</tr>

<tr>

<td>sadf</td>

</tr>

</table>

由于在这里csdn设置他自动添加了一个空格(&nbsp)，所以显示不出细线出来。

 

sadf

 

制作不对称的表格需要在td里面嵌套一个表格，不能直接在td里面制作，例子：制作一个2行的表格，一行3列，另一行2列。

不嵌套表格的不能实现平分：

<table height="400" border="2" cellspacing="2" cellpadding="0" width="400" align="center">

<tr>

<td>行1列1</td>

<td>行1列2</td>

<td>行1列3</td>

</tr>

<tr>

<td width="200">行2列1</td>

<td width="200">行2列2</td>

</tr>

</table>

行1列1	行1列2	行1列3
行2列1	行2列2

 

嵌套表格：

<table height="400" border="2" cellspacing="2" cellpadding="0" width="400" align="center">

<tr>

<td height="200">行1列1</td>

<td height="200" >行1列2</td>

<td height="200" >行1列3</td>

</tr>

<tr>

<td colspan="3">

<table height="200" border="1">

<td width="200">行2列1</td>

<td width="200">行2列2</td>

</table>

</td>

</tr>

</table>

行1列1	行1列2	行1列3
行2列1 行2列2

 

行拆分：

 

<table height="400" border="2" cellspacing="2" cellpadding="0" width="400" align="center">

<tr>

<td height="200" rowspan="2"></td>

<td height="200" ></td>

</tr>

<tr>

<td></td>

</tr>

</table>

 

ps：设置最外层表格宽度、高度时最好用具体像素值，不用百分比

ps：尽量少用行列拆分，多用表格嵌套