表格:
父级
<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"
注意:
最简单的表格可以只有表身
网友评论