HTML表格标签的使用方法与示例

挑战30天在头条写日记#

HTML是一种用于创建网页结构和内容的标记语言，其中包含了许多标签，可以用于排版、布局和展示内容。本文将详细介绍HTML中的<tr>和<td>标签的使用方法，并通过示例展示如何创建表格。

1. <tr>标签的作用： <tr>标签代表HTML表格中的一行（行数据），它可以包含一个或多个<td>元素作为单元格。

2. <td>标签的作用： <td>标签用于定义表格中的一个单元格（列数据），可以包含文本、图像、链接等内容。

3. 如何使用<tr>和<td>： 在使用<tr>和<td>标签时，首先需要创建一个<table>元素作为表格的容器，然后在其中嵌套<tr>和<td>标签，如下所示：

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

4. 表格样式： 可以使用CSS来为表格添加样式，如设置边框、背景颜色等。以下是一个简单的示例：

htmlCopy code<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
</style>

5. 示例应用： 以下示例演示了如何使用<tr>和<td>标签创建一个包含姓名、年龄和城市的简单表格：

htmlCopy code<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>城市</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>28</td>
    <td>广州</td>
  </tr>
</table>

</body>
</html>

6. 书籍参考：

"HTML and CSS: Design and Build Websites" by Jon Duckett
"Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" by Jennifer Niederst Robbins

7. 总结： 通过本文的介绍，我们了解了HTML中<tr>和<td>标签的基本用法，以及如何创建简单的表格和添加样式。使用这些标签，我们可以轻松地创建具有结构和内容的网页表格，提升页面的可读性和可视性。

TML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签 img 以及和他相关的属性。

1.使用方法

<img src="路径/文件名.图片格式" width="属性值" height="属性值" border="属性值" alt="属性值">

2.属性

src：指定我们要加载的图片的路径和图片的名称以及图片格式。
width：指定图片的宽度，单位px、em、cm、mm。
height：指定图片的高度，单位px、em、cm、mm。
border：指定图标的边框宽度，单位px、em、cm、mm。
title：当网页上的图片被加载完成后，鼠标移动到上面去，会显示这个图片指定的属性文字,也就是鼠标悬停时显示的内容。
alt：如果图像没有下载或者加载失败，会用文字来代替图像显示；搜索引擎可以通过这个属性的文字来抓取图片。

3.注意

img 为单标记，不需要使用 img 闭合
在加载图像文件的时候，文件的路径或者文件名文件格式错误，将无法加载图片

4.举例

<img src="img/gzh.jpg" width="200px" height="200px" border="3px" title="码海无际" alt="二维码"><img src="img/gzh.jp" width="200px" height="200px" border="3px" title="码海无际" alt="二维码">

文章介绍了html标签里的input标签和label标签的美化效果！效果图如下：

用在复选框中选择，个性化了复选框的默认样式，增强用户体验！

实现方法也非常简单

下面看看代码

html:

css:

在线咨询

上一篇：25、HTTP2 / HTTP1 之间的区别是什么（高薪常问）
下一篇：深入浅出浏览器渲染原理

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。