目标
- 能够书写表格
- 能够写出无序列表
- 能够写出3~4个常用的input表格类型
- 能够写出下拉列表表单
- 能够使用表单元素实现注册页面
- 能够独立查阅W3C文档
- 表格标签、列表标签、表单标签、综合案例、查阅文档
第一部分:表格标签
表格是实际开发中非常常用的标签:
1. 表格的主要作用
表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好,特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把复杂的数据表现得很有条理。
总结:表格不是用来布局页面的,而是用来**展示**数据的。
2. 表格的基本语法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
<table></table>
是用于定义表格的标签。<tr></tr>
标签用于定义表格中的行,必须嵌套在<table></table>
标签中。<td></td>
用于定义表格中的单元格,必须嵌套在<tr></tr>
标签中。- 字母td指表格数据(table date),即数据单元格的内容。
3.表头单元格标签
一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示。
`
总结:表头单元格也是单元格,常用于表格第一行,突出重要性,表头单元格里面的文字会加粗居中显示。
<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>
4.表格属性
表格标签这部分属性我们实际开发不常用,后面通过CSS来设置。
这些属性要写在表格标签table中。
目的有两个:
A、记住这些英语单词,后面CSS会使用;
B、直观感受表格的外观形态。
实操:
<body>
<table align="center" border="1"cellpadding="20"cellspacing="0"width="500"height="249">
<tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr><td>刘德华</td><td>男</td><td>56</td></tr>
<tr><td>张学友</td><td>男<td>58</td></tr>
<tr><td>郭富城</td><td>男</td><td>51</td></tr>
<tr><td>黎明</td><td>男</td><td>57</td></tr>
</table>
</body>
总结
- 先制作表格的结构
- 后书写表格属性
实操:
<table align="center" width="500"height="249"border="1" cellspacing="0">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="images/1.png" height="20"/></td>
<td>456</td>
<td>123</td>