前端学习(九）表格（笔记）

表格：
<table>----表格父级
<thead>---表头
<tr>-----------一行
<th>1</th>-------表头里一行中的一列
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>----表身
<tr>
<td>1</td>----一行里的一列
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
<tfoot>----表尾
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tfoot>
</table>
关于表格的样式：
border-collapse:collapse; ---加给table，作用合并表格border（只是把boder重叠在一起！）
关于与表格的私有属性
<thead>
<tr>
<th colspan="5">课程表</th>
</tr>
</thead>
colspan="5"----横向单元格合并！
里面的数字5代表占5格！
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td rowspan="3">3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>4</td>
<td>5</td>
</tr>
rowspan="2" ----纵向单元格合并
里面数字代表上下俩行对应的单元格个数！
=========================================================
注意：
1.在改变表格的宽高的时候，改变上面的宽，下面（一列）对应的地方也会随之改变，但是高不会！
2.在改变表格的宽高的时候，改变左面的高，右边的表格也会随之变高！
总结：一行里面会随着第一个表格的高度而变高，一列里面会随着它的宽度而变宽！
给表格里面设置宽高：
俩写法：
css：
给表格起class，直接给class名加样式
属性：
直接给表格添加私有属性：width=“100”
----------------------------------------------------------
给表格内部的文字设置左中右：
俩写法：
css：
起class
text-align:left/center/right;
属性：
align="left/center/right"
给表格内部的文字设置上中下：
俩写法：
css：
起class
vertical-align:top/middle/bottom;
属性：
valign="top/middle/bottom"
=========================================================
注意：
最简单的表格可以只有表身