HTML第二天学习总结—— 表格

最新推荐文章于 2022-03-10 18:54:40 发布

李穩钰

最新推荐文章于 2022-03-10 18:54:40 发布

阅读量403

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_52819925/article/details/119134079

版权

本文总结了HTML表格的主要作用，强调其用于数据展示而非页面布局。详细介绍了表格的创建、表头单元格、表格属性，包括``、``、`

`、`

`等标签的使用，并提供了一个小案例。此外，还讲解了如何通过`rowspan`和`colspan`进行单元格合并，以及表格相关属性如`align`、`border`等的应用。摘要由CSDN通过智能技术生成

表格的主要作用

1、表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。

2、表格不是用来布局页面的，而是用来展示数据的。

支出项目	单价（元）	数目	金额（元）
垃圾箱	30	12	360
垃圾牌	100	12	1200
宣传单	0.08	400	32
宣传小册子	3	250	750
合计	——	——	2342

表格的具体用法

<table>
    <tr>
        <td>单元格内的文字</td>
    </tr>
</table>

1、<table> </table> 是用于定义表格的标签。

2、<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。

3、<td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

4、字母 td 指表格数据（table data），即数据单元格的内容。

5、快速生成表格的书写方式：table>tr*2>td*3 （两行三列）

表头单元格标签

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

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

<table>
    <tr>
        <th>姓名</th>
    </tr>
</table>

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

表格属性

表格标签这部分属性我们实际开发我们不常用，后面通过 CSS 来设置。

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式。
border	1或 “”	规定表格单元是否拥有边框，默认为"",表示没有边框。
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素。
cellspacing	像素值	规定单元格之间的空白，默认2像素。
width	像素值或百分比	规定表格的宽度。

一个小案例

在这里插入图片描述

思路：

先制作表格的结构

1、第一行里面是 th 表头单元格

2、第二行开始里面是 td 普通单元格单元格里面可以放任何元素，文字链接图片等都可以

后书写表格属性

1、用到宽度高度边框cellpadding 和 cellspacing

2、表格浏览器中对齐 align

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>今日小说排行榜</title>
</head>
<body>
    <table align="center" width="500" height="249" border="1" cellspacing="0">
    <thead>
        <tr>
            <th>排名<

最低0.47元/天解锁文章

李穩钰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML第二天学习总结—— 表格

表格的主要作用1、表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。2、表格不是用来布局页面的，而是用来展示数据的。支出项目单价（元）数目金额（元）垃圾箱3012360垃圾牌100121200宣传单0.0840032宣传小册子3250750合计————2342表格的具体用法<table> <tr> <td>单元格内的文字</t
复制链接

扫一扫