html学习笔记2（table标签）

表格标签

<table border="1" cellpading="2" cellspacing="3">   
    <caption>表格标题</caption>
	<tr>
        <th>row 1, cell 1</th>  //表头标签，会将文本加粗并居中
        <th>row 1, cell 2</th>
    </tr> 
    <tr>
        <td>row 2, cell 1</td> 
        <td>row 2, cell 2</td>
    </tr>
	<tr>
		<td colspan="2">      </td> //colspan="2",占两列，此时单元格已经有3列
		<td>       </td>
	</tr>
	<tr>
		<td rowspan="2">    </td> //rowspan="2",占两行，
	</tr>
</table>

<tr></tr>表格中的一行
<td></td>表格中的单元格
默认情况下边框属性border为0，所以看不到为边框
1.width、height可以给table、td使用
如果给td设置width/height，会修改当前单元格的宽、高，不会影响整个表格的宽、高。
2.水平对齐、垂直对齐
2.1水平对齐可以给table、tr、td使用

align="center"

left	左对齐内容
right	右对齐内容
center	居中对齐内容
justify	每行有相等的宽度

给table设置align是控制表格在水平方向上的对齐方式。
给tr设置align是控制当前行中所有单元格里内容的对齐方式。
给td设置align是控制当前单元格里内容的对齐方式。
若td、tr都设置了align属性，则单元格里的内容遵从td里设置的align。
2.2垂直对齐只能给tr、td使用

valign="top/bottom/middle/baseline"

3.外边距：单元格与单元格之间的距离

cellspacing

默认情况下cellspacing为2px，只能table使用。

4.内边距：单元格的边框和文字的间距

cellpading

以上属性仅供了解，因为改变样式的语言是css。

细线表格

把cellspacing="0"来完成细线表格是不靠谱的，它是将两条线合并成一条线
错误

<table border="1" cellspacing="0">
    <tr>
        <td>haha</td>
        <td>嘻嘻</td>
    </tr>
    <tr>
        <td>hehe</td>
        <td>啦啦</td>
    </tr>
</table>

给table设置bgcolor=“black”、cellspacing=“1px”,tr设置bgcolor="white

正确

<table bgcolor="black" cellspacing="1px">
    <tr bgcolor="white">
        <td>haha</td>
        <td>嘻嘻</td>
    </tr>
    <tr bgcolor="white">
        <td>hehe</td>
        <td>啦啦</td>
    </tr>
</table>

单元格合并

td属性
是向后或向下合并
colspan="2":水平方向上2个单元格合并
是1个单元格当做2个单元格看待，比如最开始设置了2个单元格，然后又给其中一个单元格设置了colspan=“2”,则就变成了3个单元格。
rowspan="2":垂直方向上2个单元格合并
是1个单元格当做2个单元格看待，比如最开始设置了2行，然后又给其中一个单元格设置了rowspan=“2”,则就变成了3行。