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

格空间设置

通过为<table></table>标签的cellspacing进行赋值可以调整单元格与单元格之间的空间距离。

示例代码如下：

<table border = "1" width = "100%" cellspacing = "50">

页面效果如下：

下面我们删除cellspacing = "50"这段代码看看变化，如图：

通过对比，大家应该明白cellspacing这个属性的作用了吧。

通过为<table></table>标签的cellpadding进行赋值可以调整单元格边框与单元格内容之间的空间距离。

示例代码如下：

<table border = "1" width = "100%" cellspacing="10" cellpadding = "20">

页面效果如下：

通过与上图对比，我们不难发现变化。

设置表格颜色

这里我们要介绍一个全局属性style，对，你没看错！就是freestyle的那个style！英文翻译过来是"样式"、"风格"的意思。我们通过这个属性可以为表格设置颜色。实际上，可以为任何html元素设置颜色、大小、排列等不同属性！

值得一提的是把style信息如果写到一个独立文件中，并保存为css文件，就是以后我们要学的CSS层叠样式列表了。

这里我们先来简单了解一下它作为html的一个全局属性的用法。

示例代码如下：

<table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">

页面效果如图所示：

我们来分析一下这段代码，写法和其他属性大同小异。

首先也是才有"属性"="数值"的写法，具体是：style=""

是不是和其他属性写法一样？

但是到了双引号里面就不同了，比如width属性只需要为其赋值就可以，比如width="100%"。

而style是在双引号里面再指定属性。例如：style="background-color"。

然后我们再为background-color（背景颜色）属性赋值。

这时，赋值的写法就发生变化了，不是使用=号，而是使用：。

例如style="background-color ： #00ffff；"

大家注意的是为其赋值后，要用；结尾。这个；必须要添加，因为，通过style可以指定多个不同的样式属性，在指定多个样式属性时，我们使用；分割。

#00ffff这个符号是色彩的16进制表示方法，这个颜色是蓝色。

#000000这个符号的颜色是黑色。

#ffffff这个符号是白色。

这个颜色的算法我们会在下一期中详细讲解，感兴趣的小伙伴请关注！

大家想一想。如何为一列单元格指定背景颜色呢？

示例代码如下：我们为表格标题栏赋予绿色。

<tr style = "background-color: #00ff00;"><th>姓名</th><th>年龄</th></tr>

页面效果如图所示：

下面我们为"一列一行"、"二列一行"赋予红色。

示例代码如下：

<tr>
  <td style = "background-color: #ff0000;">一列一行</td>
  <td>一列二行</td>
</tr>
<tr>
    <td style = "background-color: #ff0000;">二列一行</td>
    <td>二列二行</td>
</tr>

页面效果如下：

今天的内容到此结束了，一下是今天示例的全部代码：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
  </head> 
  <body>
  <h1>第一个网页</h1><hr>
  <h2>表格元素</h2><hr>
  <table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">
  <caption>表格标题</caption>
  <tr style = "background-color: #00ff00;">
  <th>姓名</th>
  <th>年龄</th>
  </tr>
  <tr>
  <td style = "background-color: #ff0000;">一列一行</td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td style = "background-color: #ff0000;">二列一行</td>
  <td>二列二行</td>
  </tr>
  </table>
  </body> 
  </html>

明天将继续为大家讲解页面制作中16进制的颜色指定方式和另外一种表格颜色指定方式。

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

示：文章底部有完整的源代码，使用Rollup编译后总体积只有2kb左右，童鞋们有需要可以直接CTRL + C拿走。

我想，前端的童鞋们应该都了解或使用过网格布局吧？著名的UI库：bootstrap，element-ui，iview等都提供了网格布局。我们所熟知的这些库都是采用的CSS预处理语言生成的网格布局。这是一种主流的实现方案，也很符合前端开发的一个格言：能用CSS实现的，尽量不要用JS实现。

动机：熟悉网格布局实现原理的童鞋们应该都比较清楚，网格布局的CSS代码量是很大的，轻而易举就能达到30kb以上；虽然我们是用less这样的预处理语言写的，拥有编程语言的一些能力，可以利用循环和变量来大幅减小我们所编写的代码量；但是，最终浏览器加载的依旧是生成的CSS。这个体积嘛，像我这种对体积非常敏感的人，感觉有一点点儿大。那么，我们有没有一种方式，可以大幅减小网格布局的体积呢？这正是本篇文章的主题：使用JS动态生成响应式网格布局。

我们先看两张效果图，这是element-ui官方文档Row和Col组件的例子没有做任何修改，直接在本篇文章实现的组件下的效果。

前端网格布局

要使用JS生成网格布局，我们需要动态创建样式表；使用JS创建样式表是很简单的事情，只需要创建一个style元素，然后将样式表字符串添加到style元素，最后将style元素添加到head即可。如下是createStylesheet函数的定义：

export function createStylesheet (id, styleSheetStr) {
  let el = document.getElementById(id)
  // 避免重复创建相同的样式表，只有不存在的时候才创建
  if (!el) {
    el = document.createElement('style')
    el.id = id
    el.innerHTML = styleSheetStr
    document.head.appendChild(el)
  }
}

我们采用的网格布局是24分栏，和element-ui保持一致，这也是目前最主流的网格布局分栏数量。我们需要生成0-24共25列，当列占用的空间为0的时候处于隐藏状态。现在，我们先创建一个包含25个元素的数组，我们不需要关注数组中元素的值，我们只会用到元素的索引。之所以使用数组，是因为我不想使用for循环，而更偏向于数组的遍历方法。

const nulls = new Array(25).fill(null)

现在，我们定义一个获取列宽度的函数getSpan，当列数为0的时候，将元素设置为不可见。

const getSpan = (i, val) => i ? `width:${val}` : 'display:none'

然后，我们创建用于生成列的函数genCol，该函数将列数转化为百分比，以实现弹性的宽度。不知道童鞋们有没有被left和right搞懵呢？[呆无辜]

export const cls = 'x-col' // class前缀

const genCol = () => nulls.map((_, i) => {
  const val = `${i / 24 * 100}%`
  return [
    `.${cls}_span-${i}{${getSpan(i, val)};}`, // 列宽
    `.${cls}_pull-${i}{right:${val};}`, // 向左移动的宽度
    `.${cls}_push-${i}{left:${val};}`, // 向右移动的宽度
    `.${cls}_offset-${i}{margin-left:${val};}` // 向右的偏移宽度
  ].join('')
}).join('')

目前，我们生成的布局不是响应式的，不管屏幕有多宽，都会占用固定的百分比宽度。那么，我们如何使布局变成响应式的呢？媒体查询，该你出场了。

现在，我们先定义一个根据窗口宽度生成布局的函数genColBySize。这个函数和上面的genCol函数长的很像，只是class名称中添加了一个size，童鞋们应该都能理解吧？

const genColBySize = size => nulls.map((_, i) => {
  const val = `${i / 24 * 100}%`
  return [
    `.${cls}_${size}-span-${i}{${getSpan(i, val)};}`,
    `.${cls}_${size}-pull-${i}{right:${val};}`,
    `.${cls}_${size}-push-${i}{left:${val};}`,
    `.${cls}_${size}-offset-${i}{margin-left:${val};}`
  ].join('')
}).join('')

我们与element-ui保持一致，将响应式断点设置为5个，分别是: xs，sm，md，lg，xl；现在，我们生成响应式布局，并导出一个添加样式表函数addStylesheet。

const genResponsiveCol = () => [
  ['xs'],
  ['sm', 768],
  ['md', 992],
  ['lg', 1200],
  ['xl', 1920]
].map(_ => _[1]
      ? `@media (min-width:${_[1]}px){${genColBySize(_[0])}}`
      : genColBySize(_[0])
 ).join('')

// 为什么没有写在addStylesheet里面？
// 是为了减少2个生成函数的调用次数，避免不必要的调用，现在只会被调用一次
const ruleStr = genCol() + genResponsiveCol()

export const addStylesheet = () => {
  createStylesheet('XGridLayout', ruleStr)
}

以上就是使用JS生成响应式网格布局的全部核心代码，是不是很简单？现在，我把Row和Col组件的剩余代码提供给童鞋们，为了节省篇幅，把空行去掉了，但可读性还是很高的。希望阅读过本篇文章的童鞋们都能够自己动手实现。

Col.vue组件源码：

<template>
  <div :class="classes" :style="styles">
    <slot />
  </div>
</template>
<script setup>
import { computed, inject, onMounted } from 'vue'
// N: Number, N0: { type: Number, default: 0 }
import { N, N0 } from '../../types'
import { addStylesheet, cls } from './utils'
const props = defineProps({
  span: { type: N,  default: 24 },
  offset: N0,
  push: N0,
  pull: N0,
  xs: {},
  sm: {},
  md: {},
  lg: {},
  xl: {}
})
const classes = computed(() => {
  const clsList = [cls]
  ;['span', 'offset', 'push', 'pull'].forEach(k => {
    const v = +props[k]
    v && clsList.push(`${cls}_${k}-${v}`)
  })
  ;['xs', 'sm', 'md', 'lg', 'xl'].forEach(k => {
    const v = props[k]
    if (v) {
      const opts = +v ? { span: +v } : v
      Object.keys(opts).forEach(k2 => {
        clsList.push(`${cls}_${k}-${k2}-${opts[k2]}`)
      })
    }
  })
  return clsList
})
const gutter = inject('gutter') // 响应式的数值，由Row组件提供，注入到Col组件
const styles = computed(() => {
  const padding = `${gutter.value / 2}px`
  return gutter.value && { paddingLeft: padding, paddingRight: padding }
})
onMounted(() => {
  addStylesheet()
})
</script>

Row.vue组件源码：

<template>
  <div :class="classes" :style="styles">
    <slot />
  </div>
</template>
<script setup>
import { computed, provide, toRefs } from 'vue'
// N0: { type: Number, default: 0 }, oneOf: (arr, v) => arr.includes(v)
import { N0, oneOf } from '../../types'
const props = defineProps({
  gutter: N0,
  justify: {
    default: 'start',
    validator: v => oneOf(['start', 'end', 'center', 'space-around', 'space-between'], v)
  },
  align: {
    validator: v => oneOf(['top', 'middle', 'bottom'], v)
  }
})
const { gutter } = toRefs(props) // gutter是响应式的
provide('gutter', gutter) // 提供给子组件使用
const classes = computed(() => {
  const cls = 'x-row'
  return [
    cls,
    props.align && `${cls}_${props.align}`,
    props.justify && `${cls}_${props.justify}`,
    { gutter: props.gutter }
  ]
})
const styles = computed(() => props.gutter && { margin: `0 -${props.gutter / 2}px` })
</script>

Col组件样式是通过JS生成的，我们只需要row.scss样式文件就够了，这里是源码：

.x-row {
  display: flex;
  &_top {
    align-items: flex-start;
  }
  &_middle {
    align-items: center;
  }
  &_bottom {
    align-items: flex-end;
  }
  &_start {
    justify-content: flex-start;
  }
  &_end {
    justify-content: flex-end;
  }
  &_center {
    justify-content: center;
  }
  &_space-around {
    justify-content: space-around;
  }
  &_space-between {
    justify-content: space-between;
  }
}
.x-col {
  word-wrap: break-word;
}

现在我们可以实现体积只有2kb的响应式网格布局了，童鞋们理解了吗？感谢阅读！

在线咨询

上一篇：HTML（入门），CSS中，常见的居中方式
下一篇：CSS 中几种最常用的水平垂直居中的方法

您的项目需求

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

整合营销服务商

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

格空间设置

HTML完整学习目录

您的项目需求