【网页前端设计HTML】表格

5 12霞

于 2024-07-14 17:47:45 发布

阅读量622

点赞数 23

分类专栏： HTML 文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_53597021/article/details/140418622

版权

一、表格的简介

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

表格的主要作用
表格的基本语法
⭐表格的主要作用
表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
总结：表格不是用来布局页面的,而是用来展示数据的。如图所示：

⭐表格的基本语法

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

二、表格的基本结构

⭐在HTML中，一个表格一般会由以下3个部分组成。
（1）表格：table标签
（2）行：tr标签； tr，指的是table row（表格行）；
（3）单元格：td标签； td，指的是table data cell（表格单元格）。
语法：

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

说明：
<table>和</table>表示整个表格的开始和结束；<tr>和</tr>表示行的开始和结束；而<td>和</td>表示单元格的开始和结束。在表格中，有多少组“<tr></tr>”，就表示有多少行。
以上代码的效果如下图所示：
在这里插入图片描述
练习：请补充完成下图设计：

示例代码如下：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>表格基本结构</title>
    <!--这里使用CSS为表格加上边框-->
    <style type="text/css">
        table,tr,td{
     border:1px solid silver;}
    </style>
</head>
<body>
</body>

最低0.47元/天解锁文章

5 12霞

关注

23
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【网页前端设计HTML】表格

表格的主要作用表格的基本语法⭐表格的主要作用表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。总结：表格不是用来布局页面的,而是用来展示数据的。如图所示：⭐表格的基本语法。
复制链接

扫一扫