整合营销服务商

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

免费咨询热线:

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

页编程之表格样式。

同学们好,我是一名免费的少儿编程老师。今天我要分享的内容是以列为单位设置表格样式。在插入表格课程中,我已经讲解了HTML中没有单独的列标签,列是由对应的单元格组成的行形成的。虽然如此,但列这个概念仍然是存在的。

让我们来看一下今天的示例效果。这个网页上有一个3行3列的表格,其中3列分别是姓名、科目和分数,而3行分别是表头行、字体加粗的内容和两行。第一列和第二列的背景颜色是绿色,第三列的背景颜色是灰色。在一列中,每一个单元格的样式都是统一的。

接下来,让我们看看实现的代码。以列为单位设置表格样式,实际上是通过这两个标签来实现的,分别是colgroup和col。colgroup翻译过来就是“列”的意思,而colgroup则是“列主”的意思。

首先,让我们来看看colgroup标签。这个标签是一个无属性的围堵标签,它的作用只有一个,即声明这个标签内包含的是本表格列的样式。通过这个标签,我们可以向整个列应用样式,而不需要为每一个单元格或每一行设置样式。

这个标签必须在table标签内,如果有caption标签,则必须在thead标签之前使用。如果不明白各标签的先后顺序,可以看看上节课的内容。colgroup标签仅仅是声明,具体的样式是要使用col标签来实现的。col标签的数量应该与TDTH的标签数量一致,一一对应地设置。第1行的col标签对应第1列的样式,第2行的col标签对应第2列的样式,以此类推。

有些同学会问,老师,你这里的表格有三列,但是你只写了两个col标签,这时候就要讲到col标签在HTML5中的两个常用属性,一个是col属性,说明了这一行的col标签的样式可以跨几列。

例如,在这里将第一行的col标签的Span属性设置为2,这就意味着这个样式在当前位置跨了两列。换句话说,让第一列和第二列使用了同一个样式。

第二个属性是它的style标签。这个style标签的内容是CSS的一段代码,通过这个属性我们可以为列添加各种效果。严格来说,style并不是卡标签的一个专用属性,而是HTML的全局属性之一。所谓的全局属性就是只要是HTML标签都自带这一个属性。对于各位同学来说,这是一个新概念,你们只需要记住就可以了。通过使用colgroup标签和col标签的配合,我们不仅能够灵活快速地为表格添加样式,进行美化,还能大幅减少代码量,提高页面加载速度。

以上就是今天的分享,希望各位同学能够牢记在心,并在下一次练习中做到不看视频也能够写出代码。如果需要获取相关案例和文档,可以向我提问。我们下期再见。如果你对网页编程、服务端编程、数据库、算法等感兴趣,欢迎点赞、关注!

格语法:

注意:颜色使用格式有三种:rgb(x,x,x) #xxxxxx colorname

<table width=""></table>指定表格的宽度大小(使用数字pixel或%)

<table border=""></table>设定表格边框大小(使用数字pixel)

<table align=""></table>表格位置,置左,为默认值

align属性:left(左对齐表格,默认值)、right(右对齐表格)、center(居中对齐表格)

<table bgcolor=""></table>设定表格的背景颜色

<table cellpadding=""></table>指定内容与网格线之间的间距(使用数字pixel或%)

<table cellspacing=""></table>指定网格线与网格线之间的距离(使用数字pixel或%)

<table border="1" cellspacing="0" cellpadding="0">

通常表格, 这两个参数都设置为 0 。

<table rules="rows"></table>规定内侧边框的哪个部分是可见的。(兼容性差)

rules属性:none 没有线条。

groups 位于行组和列组之间的线条。

rows 位于行之间的线条。

cols 位于列之间的线条。

all 位于行和列之间的线条。


<table summary="Monthly savings for the Flintstones family"></table>

定义了表格内容的摘要:

表格结构:

在使用表格进行布局时, 可以将表格划分为头部、主体和页脚, 具体如下所示:

<thead></thead>:用于定义表格的头部, 必须位于<table></table>标记中, 一般包含网页的logo和导航等头部信息。

<tfoot></tfoot>:用于定义表格的页脚, 位于<table></table>标记中<thead></thead>标记之后, 一般包含网页底部的企业信息等。

<tbody></tbody>:用于定义表格的主体, 位于<table></table>标记中<tfoot></tfoot>标记之后, 一般包含网页中除头部和底部之外的其他内容。

注意:在没有<tbody></tbody>比较的情况下, 浏览器会自动添加<tbody></tbody>标记。

<table bordercolor=""></table>设定表格边框的颜色

<table cols=""></table>指定表格的栏数

<table height=""></table>指定表格的高度大小(使用数字)

<table background=""></table>背景图片的URL=就是路径网址(默认是repeat:水平和垂直方向重复)

<table bordercolordark=""></table>设定表格暗边框的颜色

<table bordercolorlight=""></table>设定表格亮边框的颜色

<tr align=""></tr> 定义表格行的内容对齐方式。

align属性值:right、left、center、justify、char

<tr bgcolor=""></tr> 规定表格行的背景颜色。

<tr valign=""></tr> 规定表格行中内容的垂直对齐方式。

valign属性值right、left、center、justify、char

<td colspan=""></td>指定储存格合并栏的栏数(使用数字)

<td rowspan=""></td>指定储存格合并列的列数(使用数字)

<td align=""></td> 调整表格字段之左右对齐

<td bgcolor=""></td> 设定表格字段之背景颜色

<td colspan="" rowspan=""></td> 表格字段的合并

<td valign=""></td> 调整表格字段之上下对齐

<td width=""></td> 调整表格字段宽度

<td nowrap="nowrap"></td> 规定表格单元格中的内容不换行(注意只有一个值:nowrap)

<caption></caption>为表格加上标题

<caption align="">设定表格标题位置

align属性:left, center(默认值), right

<th></th> 定义表头(粗体居中)

细表格边框

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="158" height="68">
<tr>
<td width="158" height="68"></td>
</tr>
</table>

表格创建后浏览器会自动添加<tbody>标签