HTML表格标签(重点)

本文详细介绍了HTML中的表格标签,包括表格的作用、基本语法,以及表头单元格、表格属性、表格结构、合并单元格等内容。通过实例解析,帮助读者掌握创建和美化表格的方法,强调了``, ``, `
`, ``等标签的使用,并提及了CSS在表格样式设置中的重要性。" 123234180,9531314,Fiddler高级过滤技巧详解,"['测试工具', 'fiddler'] 摘要由CSDN通过智能技术生成

目标

  1. 能够书写表格
  2. 能够写出无序列表
  3. 能够写出3~4个常用的input表格类型
  4. 能够写出下拉列表表单
  5. 能够使用表单元素实现注册页面
  6. 能够独立查阅W3C文档
  7. 表格标签、列表标签、表单标签、综合案例、查阅文档

第一部分:表格标签

表格是实际开发中非常常用的标签:

1. 表格的主要作用
表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好,特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把复杂的数据表现得很有条理。

 总结:表格不是用来布局页面的,而是用来**展示**数据的。

在这里插入图片描述

2. 表格的基本语法

<table>
   <tr>
     <td>单元格内的文字</td>
     ...
   </tr>
   ...
</table>
  • <table></table>是用于定义表格的标签。
  • <tr></tr>标签用于定义表格中的行,必须嵌套在<table></table>标签中。
  • <td></td>用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。
  • 字母td指表格数据(table date),即数据单元格的内容。

3.表头单元格标签

一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示。
`

`标签表示HTML表格的表头部分(table head的缩写)

总结:表头单元格也是单元格,常用于表格第一行,突出重要性,表头单元格里面的文字会加粗居中显示。

<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>

在这里插入图片描述
总结

  1. 先制作表格的结构
  2. 后书写表格属性

实操:
在这里插入图片描述

   <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>
  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值