最近抽了点时间,整理一下一些前端基础知识,写的不好的地方请大家踊跃留言,我会继续优化这一系列文章:
table的常用属性:
border=""
表格的边框宽度
width=""
表格的宽度
height=""
表格的高度
cellspacing=""
单元格到周围的距离
cellpadding=""
单元格内文字到单元格的举例
align="left|right|center"
默认left 当前表格在页面中的对齐位置
bgColor="red"
背景颜色
borderColor="green"
表格的边框颜色
tr的常用属性
align="left|right|center"
当前行文字横向对齐方式 默认:left
valign="top|bottom|middle"
当前行文字纵向对齐方式 默认:middle
bgColor=""
当前行颜色
td的常用属性:
bgColor=""
当前单元格颜色
align="left|right|center"
当前单元格文字横向对齐方式 默认:left
valign="top|bottom|middle"
当前单元格文字纵向对齐方式 默认:middle
width=""
当前单元格宽度 如果table有宽度 那么 只能是去挤其他单元格 让当前 达到最大宽度就可以了 不会撑大table宽度
height=""
当前单元格高度 无论table有没有设置过高度 都会撑高当前table
细线表格的制作:
table{
/* 表格的边框合并 */
border-collapse:collapse;
}
表格标题:
<table border="1" width="300" height="150" align="center" >
<!-- 表格标题 跟着表格一起走 -->
<caption>表格信息登记表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr align="center">
<th>海柱</th>
<td>38</td>
<td>法师</td>
</tr>
<tr align="center">
<th>小白</th>
<td>18</td>
<td>都比</td>
</tr>
</table>
姓名 | 年龄 | 职业 |
---|---|---|
亚瑟 | 38 | 战士 |
后羿 | 18 | 射手 |
表格语义化:
语义化标签:本身不具有任何效果 不会对原有的效果有任何影响,作用就是用来分层次与结构的
thead
,tbody
,tfoot
<table border="1" width="400" height="150" align="center">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<tr>
<td>海柱</td>
<td>38</td>
<td>法师</td>
</tr>
<tr>
<td>小岳岳</td>
<td>12</td>
<td>喜剧人</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="right" colspan="3">------摘自<<清华大学食堂>></td>
</tr>
</tfoot>
</table>
姓名 | 年龄 | 职业 |
---|---|---|
安琪拉 | 38 | 法师 |
小鲁班 | 12 | 射手 |
------摘自<<王者农药>> |
不规则表格:
合并行 变高 rowspan=""
合并列 变宽 colspan=""
<table border="1" width="400" height="400" align="center">
<tr align="center">
<td colspan="2" bgColor="red">1</td>
<td rowspan="2" bgColor="blue">2</td>
</tr>
<tr align="center">
<td rowspan="2" bgColor="orange">4</td>
<td bgColor="green">5</td>
</tr>
<tr align="center">
<td colspan="2" bgcolor="hotpink">8</td>
</tr>
</table>
1 | 2 | |
4 | 5 | |
8 |