一.最基本的表格
表格标签:
<table>:表格的最外层容器
<tr>: 定义表格行
<th>: 定义表头
<td>:定义表格单元
<caption>:定义表格标题
<table>
<tr>
<th>日期</th>
<th>天气</th>
<th>出行情况</th>
</tr>
<tr>
<td>1月1号</th>
<td>晴</th>
<td>适合出行</th>
</tr>
<tr>
<td>1月2号</th>
<td>暴雨</th>
<td>不宜出行</th>
</tr>
</table>
实现的表格:
是不是看起来很丑?但是没关系,接下来我们可以给表格添加属性美化一下,来一个更难一点的
border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行
colspan:合并列
align:左右对齐方式
valign:上下对齐方式
<table border="1" cellpadding=10 align="center">
<tr align="center">
<th>班次名称</th>
<th>科目</th>
<th>授课内容</th>
<th>增值服务</th>
<th>课时</th>
<th>价格</th>
</tr>
<tr align="center">
<th rowspan="3">真题精解班</th>
<td>行测+申论</td>
<td>全科历年真题精解</td>
<td rowspan="3">课后赠两套模拟卷</td>
<td>48</td>
<td>1280元</td>
</tr>
<tr align="center">
<td>行测</td>
<td>行测历年真题精解</td>
<td>32</td>
<td>980元</td>
</tr>
<tr align="center">
<td>申论</td>
<td>申论历年真题精解</td>
<td>16</td>
<td>580元</td>
</tr>
<tr align="center">
<th rowspan="3">高分技巧班</th>
<td>行测+申论</td>
<td>全科技巧强化</td>
<td rowspan=3>入学试卷测评</td>
<td>32</td>
<td>980元</td>
</tr>
<tr align="center">
<td>行测</td>
<td>行测速解技巧强化</td>
<td>18</td>
<td>680元</td>
</tr>
<tr align="center">
<td>申论</td>
<td>申论速解技巧强化</td>
<td>14</td>
<td>580元</td>
</tr>
</table>
这是一个相对复杂一点的表格,但其实并没有那么难,可以尝试一下: