HTML中怎样通过表格标记创建表格？

发布时间：

2023-06-06
版权所有：

云和教育
分享：

在前端开发中时，为了使网页中的数据能够有条理地显示，可以使用表格对网页进行规划。在Word文档中，可通过播入表格的方式来创建表格，而在HTML网页中要想创建表格，需要使用相关的表格标记才能创建表格。在HTML网页中创建表格的基本语法格式如下所示。

在HTML网页中创建表格的基本语法格式如下所示。

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

在上述的语法中，包含3对HTML标记，分别为<table></table>、<tr></tr>、<td></td>，它们是创建表格的基本标记，缺一不可。<table></table>用于定义一个表格；<tr></tr>用于定义表格中的行，必须嵌套在<table></table>标记中，<td></td>用于定义表格中的单元格，也可称为表格中的列，必须嵌套在<tr></tr>标记中。接下来，通过一个案例来演示<table>标记的使用。在chapter01文件夹中创建一个HTML文件htmlDemo05,其关键代码如文件所示。

<body>
<table border="1">
    <tr>
        <td>姓名</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
    </tr>
    <tr>
        <td>itcast</td>
        <td>95</td>
        <td>80</td>
        <td>90</td>
    </tr>
</table>
</body>

标记的border 属性会为每个单元格应用边框，并用边框围绕表格。这里将 border 的属性设置为1,单位是像素，表示该表格边框的宽度为1像素。如果 border 属性的值发生改变，那么只有围绕表格的边框尺寸会发生变化，表格内部的边框还是1像素宽。如果将border的属性值设置为0或者删除border属性，将显示没有边框的表格。使用浏览器打开文件，显示结果如图1所示。

1685945322927_表格.png

有边框表格的显示效果

将border属性值设置为0，保存后刷新页面，浏览器的显示结果如图所示。

1685945455666_属性.png

无边框表格的显示效果

从上图的显示效果可以看出，表格中的内容依然整齐有序地排列着，但是这时已看不到边框。在实际开发中，建议使用CSS来添加边框样式和颜色。

如果你对前端开发感兴趣请点击云和数据官网我们整套完善的前端开发教程包括线上和线下，此外我们还有专门的客服老师回答您所关心的问题。

云和数据ICT职业教育发挥公司产业化优势与技术积淀，整合国内外优秀师资，累计自主研发230余项教辅、教材，300余项实践教学案例与实训平台，采用六位一体项目制教学模式，年培养高端ICT技术人才超10000人，累计为企业输送高端泛ICT技术人才超9万人，学员60%来自于口碑推荐。云和数据人才培养技术方向涵盖大数据、JAVA软件工程、UI用户体验设计、前端开发、软件测试、智能制造、虚拟现实、云计算、人工智能九大方向，以九大精品课程为基础，八大就业基地为依托，一次就业率99.02%，61.9%就业薪资超1W，以大数据为首的精品专业平均薪资13.25K。

上一篇软件测试与软件开发有何关系？
下一篇 Java语言的优势有哪些？可以从事哪些职位？

HTML中怎样通过表格标记创建表格？

最新开班信息

课程咨询

云和热门培训课程

推荐阅读