HTML学习总结基础篇如何设计一个表格

最新推荐文章于 2024-03-18 18:50:29 发布

Ace_bb

最新推荐文章于 2024-03-18 18:50:29 发布

阅读量459

点赞数

分类专栏： HTML、CSS、JS 文章标签： html css

本文链接：https://blog.csdn.net/Ace_bb/article/details/104276759

版权

HTML、CSS、JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

表格

表格主要用于显示，展示数据,它可以让数据显示的非常的规整,可读性强。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。

语法格式

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

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

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签及其属性</title>
</head>
<body>
    <table border="3">
        <tr><td>姓名</td><td>年龄</td><td>性别</td></tr>
        <tr><td>李三</td><td>15</td><td>boy</td></tr>
        <tr><td>王五</td><td>16</td><td>girl</td></tr>
        <tr><td>张思</td><td>29</td><td>girl</td></tr>
    </table>
</body>
</html>

效果：
数据结构

表头单元格标签

< th>标签表示HTML表格中的表头部分表头的文字会自动居中加粗

<tr><th>姓名</th><th>年龄</th><th>性别</th></tr>

表格属性

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