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完整學習目錄

您的項目需求