整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

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

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>标签的基本用法,以及如何创建简单的表格和添加样式。使用这些标签,我们可以轻松地创建具有结构和内容的网页表格,提升页面的可读性和可视性。

不改变代码的情况下,通过CSS样式表在手机上展示表格内容

PC端

移动端

HTML源码

CSS处理的主要方法是:

  1. 将 table, tbody, tr 改为display: block。
  2. 将td转换为 display: inline(和span一样的效果)
  3. 这对特顶的td,设置例如颜色、背景色、位置等来改变效果

假定table的class是 the-table,CSS示例代码如下:

页中实现像表格文档那样固定table的表头和第一列内容,类似于excel表格那样!下面说说实现方法

效果如下:

在数据众多的列表下,规定的区域内上下左右都可以滚动查看,然而表头和侧边表头都还在,方便用户查看数据,增强用户体验!

实现代码

html结构:

css代码:

javascript代码: