整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
挑戰(zhàn)30天在頭條寫日記#
HTML是一種用于創(chuàng)建網(wǎng)頁結(jié)構(gòu)和內(nèi)容的標(biāo)記語言，其中包含了許多標(biāo)簽，可以用于排版、布局和展示內(nèi)容。本文將詳細(xì)介紹HTML中的<tr>和<td>標(biāo)簽的使用方法，并通過示例展示如何創(chuàng)建表格。
1. <tr>標(biāo)簽的作用： <tr>標(biāo)簽代表HTML表格中的一行（行數(shù)據(jù)），它可以包含一個或多個<td>元素作為單元格。
2. <td>標(biāo)簽的作用： <td>標(biāo)簽用于定義表格中的一個單元格（列數(shù)據(jù)），可以包含文本、圖像、鏈接等內(nèi)容。
3. 如何使用<tr>和<td>： 在使用<tr>和<td>標(biāo)簽時，首先需要創(chuàng)建一個<table>元素作為表格的容器，然后在其中嵌套<tr>和<td>標(biāo)簽，如下所示：
htmlCopy code<table>
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格3</td>
<td>單元格4</td>
</tr>
</table>
4. 表格樣式： 可以使用CSS來為表格添加樣式，如設(shè)置邊框、背景顏色等。以下是一個簡單的示例：
htmlCopy code<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
5. 示例應(yīng)用： 以下示例演示了如何使用<tr>和<td>標(biāo)簽創(chuàng)建一個包含姓名、年齡和城市的簡單表格：
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. 書籍參考：
7. 總結(jié)： 通過本文的介紹，我們了解了HTML中<tr>和<td>標(biāo)簽的基本用法，以及如何創(chuàng)建簡單的表格和添加樣式。使用這些標(biāo)簽，我們可以輕松地創(chuàng)建具有結(jié)構(gòu)和內(nèi)容的網(wǎng)頁表格，提升頁面的可讀性和可視性。
通過為<table></table>標(biāo)簽的cellspacing進(jìn)行賦值可以調(diào)整單元格與單元格之間的空間距離。
示例代碼如下：
<table border = "1" width = "100%" cellspacing = "50">頁面效果如下：
下面我們刪除cellspacing = "50"這段代碼看看變化，如圖：
通過對比，大家應(yīng)該明白cellspacing這個屬性的作用了吧。
通過為<table></table>標(biāo)簽的cellpadding進(jìn)行賦值可以調(diào)整單元格邊框與單元格內(nèi)容之間的空間距離。
示例代碼如下：
<table border = "1" width = "100%" cellspacing="10" cellpadding = "20">頁面效果如下：
通過與上圖對比，我們不難發(fā)現(xiàn)變化。
設(shè)置表格顏色
這里我們要介紹一個全局屬性style，對，你沒看錯！就是freestyle的那個style！英文翻譯過來是"樣式"、"風(fēng)格"的意思。我們通過這個屬性可以為表格設(shè)置顏色。實(shí)際上，可以為任何html元素設(shè)置顏色、大小、排列等不同屬性！
值得一提的是把style信息如果寫到一個獨(dú)立文件中，并保存為css文件，就是以后我們要學(xué)的CSS層疊樣式列表了。
這里我們先來簡單了解一下它作為html的一個全局屬性的用法。
示例代碼如下：
<table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">頁面效果如圖所示：
我們來分析一下這段代碼，寫法和其他屬性大同小異。
首先也是才有"屬性"="數(shù)值"的寫法，具體是：style=""
是不是和其他屬性寫法一樣？
但是到了雙引號里面就不同了，比如width屬性只需要為其賦值就可以，比如width="100%"。
而style是在雙引號里面再指定屬性。例如：style="background-color"。
然后我們再為background-color（背景顏色）屬性賦值。
這時，賦值的寫法就發(fā)生變化了，不是使用=號，而是使用：。
例如style="background-color ： #00ffff；"
大家注意的是為其賦值后，要用；結(jié)尾。這個；必須要添加，因?yàn)椋ㄟ^style可以指定多個不同的樣式屬性，在指定多個樣式屬性時，我們使用；分割。
#00ffff這個符號是色彩的16進(jìn)制表示方法，這個顏色是藍(lán)色。
#000000這個符號的顏色是黑色。
#ffffff這個符號是白色。
這個顏色的算法我們會在下一期中詳細(xì)講解，感興趣的小伙伴請關(guān)注！
大家想一想。如何為一列單元格指定背景顏色呢？
示例代碼如下：我們?yōu)楸砀駱?biāo)題欄賦予綠色。
<tr style = "background-color: #00ff00;"><th>姓名</th><th>年齡</th></tr>頁面效果如圖所示：
下面我們?yōu)?#34;一列一行"、"二列一行"賦予紅色。
示例代碼如下：
<tr>
<td style = "background-color: #ff0000;">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td style = "background-color: #ff0000;">二列一行</td>
<td>二列二行</td>
</tr>頁面效果如下：
今天的內(nèi)容到此結(jié)束了，一下是今天示例的全部代碼：
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網(wǎng)頁</title>
</head>
<body>
<h1>第一個網(wǎng)頁</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">
<caption>表格標(biāo)題</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>明天將繼續(xù)為大家講解頁面制作中16進(jìn)制的顏色指定方式和另外一種表格顏色指定方式。
喜歡的小伙伴請關(guān)注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
示：文章底部有完整的源代碼，使用Rollup編譯后總體積只有2kb左右，童鞋們有需要可以直接CTRL + C拿走。
我想，前端的童鞋們應(yīng)該都了解或使用過網(wǎng)格布局吧？著名的UI庫：bootstrap，element-ui，iview等都提供了網(wǎng)格布局。我們所熟知的這些庫都是采用的CSS預(yù)處理語言生成的網(wǎng)格布局。這是一種主流的實(shí)現(xiàn)方案，也很符合前端開發(fā)的一個格言：能用CSS實(shí)現(xiàn)的，盡量不要用JS實(shí)現(xiàn)。
動機(jī)：熟悉網(wǎng)格布局實(shí)現(xiàn)原理的童鞋們應(yīng)該都比較清楚，網(wǎng)格布局的CSS代碼量是很大的，輕而易舉就能達(dá)到30kb以上；雖然我們是用less這樣的預(yù)處理語言寫的，擁有編程語言的一些能力，可以利用循環(huán)和變量來大幅減小我們所編寫的代碼量；但是，最終瀏覽器加載的依舊是生成的CSS。這個體積嘛，像我這種對體積非常敏感的人，感覺有一點(diǎn)點(diǎn)兒大。那么，我們有沒有一種方式，可以大幅減小網(wǎng)格布局的體積呢？這正是本篇文章的主題：使用JS動態(tài)生成響應(yīng)式網(wǎng)格布局。
我們先看兩張效果圖，這是element-ui官方文檔Row和Col組件的例子沒有做任何修改，直接在本篇文章實(shí)現(xiàn)的組件下的效果。
前端網(wǎng)格布局
前端網(wǎng)格布局
要使用JS生成網(wǎng)格布局，我們需要動態(tài)創(chuàng)建樣式表；使用JS創(chuàng)建樣式表是很簡單的事情，只需要創(chuàng)建一個style元素，然后將樣式表字符串添加到style元素，最后將style元素添加到head即可。如下是createStylesheet函數(shù)的定義：
export function createStylesheet (id, styleSheetStr) {
let el = document.getElementById(id)
// 避免重復(fù)創(chuàng)建相同的樣式表，只有不存在的時候才創(chuàng)建
if (!el) {
el = document.createElement('style')
el.id = id
el.innerHTML = styleSheetStr
document.head.appendChild(el)
}
}我們采用的網(wǎng)格布局是24分欄，和element-ui保持一致，這也是目前最主流的網(wǎng)格布局分欄數(shù)量。我們需要生成0-24共25列，當(dāng)列占用的空間為0的時候處于隱藏狀態(tài)。現(xiàn)在，我們先創(chuàng)建一個包含25個元素的數(shù)組，我們不需要關(guān)注數(shù)組中元素的值，我們只會用到元素的索引。之所以使用數(shù)組，是因?yàn)槲也幌胧褂胒or循環(huán)，而更偏向于數(shù)組的遍歷方法。
const nulls = new Array(25).fill(null)現(xiàn)在，我們定義一個獲取列寬度的函數(shù)getSpan，當(dāng)列數(shù)為0的時候，將元素設(shè)置為不可見。
const getSpan = (i, val) => i ? `width:${val}` : 'display:none'然后，我們創(chuàng)建用于生成列的函數(shù)genCol，該函數(shù)將列數(shù)轉(zhuǎn)化為百分比，以實(shí)現(xiàn)彈性的寬度。不知道童鞋們有沒有被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('')目前，我們生成的布局不是響應(yīng)式的，不管屏幕有多寬，都會占用固定的百分比寬度。那么，我們?nèi)绾问共季肿兂身憫?yīng)式的呢？媒體查詢，該你出場了。
現(xiàn)在，我們先定義一個根據(jù)窗口寬度生成布局的函數(shù)genColBySize。這個函數(shù)和上面的genCol函數(shù)長的很像，只是class名稱中添加了一個size，童鞋們應(yīng)該都能理解吧？
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保持一致，將響應(yīng)式斷點(diǎn)設(shè)置為5個，分別是: xs，sm，md，lg，xl；現(xiàn)在，我們生成響應(yīng)式布局，并導(dǎo)出一個添加樣式表函數(shù)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個生成函數(shù)的調(diào)用次數(shù)，避免不必要的調(diào)用，現(xiàn)在只會被調(diào)用一次
const ruleStr = genCol() + genResponsiveCol()
export const addStylesheet = () => {
createStylesheet('XGridLayout', ruleStr)
}以上就是使用JS生成響應(yīng)式網(wǎng)格布局的全部核心代碼，是不是很簡單？現(xiàn)在，我把Row和Col組件的剩余代碼提供給童鞋們，為了節(jié)省篇幅，把空行去掉了，但可讀性還是很高的。希望閱讀過本篇文章的童鞋們都能夠自己動手實(shí)現(xiàn)。
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') // 響應(yīng)式的數(shù)值，由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是響應(yīng)式的
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;
}現(xiàn)在我們可以實(shí)現(xiàn)體積只有2kb的響應(yīng)式網(wǎng)格布局了，童鞋們理解了嗎？感謝閱讀！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
