成長(zhǎng)是一輩子的事兒！大家好！我是時(shí)問(wèn)新。分享前端、Python等技術(shù)，以及個(gè)人成長(zhǎng)路上的那些事兒。

一般我們看到的表格，會(huì)說(shuō)它有幾行幾列。

而在HTML中的表格，并不是簡(jiǎn)單的說(shuō)幾行幾列，是一行中給它設(shè)置多少個(gè)單元格。因?yàn)镠TML中，不同的行，可能會(huì)有不同數(shù)量的單元格。

在HTML中，要做一個(gè) 表格，需要用表格標(biāo)簽來(lái)實(shí)現(xiàn)。

、、標(biāo)簽、、就是表格標(biāo)簽。

table就是表格的意思。

tr就是table row的首字母簡(jiǎn)寫，就是表格行的意思。

td就是table data的首字母簡(jiǎn)寫，就是表格數(shù)據(jù)的意思。

所以，

table就是表示整個(gè)表格的標(biāo)簽。

tr表示表格的一個(gè)行，你的這個(gè)表格中有多少行，就需要你代碼中寫多少個(gè)tr標(biāo)簽對(duì)兒。

td就是單元格。表格的某一行中，有幾個(gè)單元格，就要寫多少個(gè)td標(biāo)簽對(duì)兒。

td標(biāo)簽對(duì)兒之間的內(nèi)容，就是單元格的數(shù)據(jù)。

tr標(biāo)簽對(duì)兒寫在table標(biāo)簽對(duì)兒里面，td標(biāo)簽對(duì)兒寫在tr標(biāo)簽對(duì)兒里面。

比如一個(gè)三行四列的表格，就是1個(gè)table標(biāo)簽對(duì)兒，里面3個(gè)tr標(biāo)簽對(duì)兒，每一個(gè)tr標(biāo)簽對(duì)兒里面是4個(gè)td標(biāo)簽對(duì)兒。如下：

注意：為了規(guī)范，

標(biāo)簽中不要直接寫td，而是先寫tr，tr里再寫td。

的border屬性

用表格標(biāo)簽實(shí)現(xiàn)的HTML表格，默認(rèn)是沒(méi)有邊框線的。

標(biāo)簽有個(gè)border屬性，這個(gè)border屬性就是設(shè)置表格的邊框線的。為了顯示出表格的邊框，就需要把標(biāo)簽的border屬性給一個(gè)數(shù)字值，這個(gè)數(shù)字表示邊框的寬度，單位是像素。

如果你的

標(biāo)簽上沒(méi)有寫border屬性值，你的表格在網(wǎng)頁(yè)上顯示出來(lái)，是沒(méi)有邊框線的。

比如把border的值設(shè)為1，就表示這個(gè)表格的的邊框的寬度是1像素。

接下來(lái)我在vscode和瀏覽器中演示一下。

如果沒(méi)有設(shè)置

標(biāo)簽的border屬性值：A B C D E F G H I J K L

在瀏覽器中顯示效果如下：

我們看到是沒(méi)有邊框線的。

只有給

標(biāo)簽加上border屬性之后，才會(huì)有邊框線。 A B C D E F G H I J K L

瀏覽器中效果：

我們看到是默認(rèn)是雙線邊框，這是HTML的特性。

為了將雙線邊框變?yōu)閱尉€邊框，就需要用css來(lái)實(shí)現(xiàn)。

下面是讓表格邊框從雙線變?yōu)閱尉€的css代碼：

這一段css代碼寫到

標(biāo)簽里面，表格就會(huì)實(shí)現(xiàn)單邊框線的效果。

不過(guò)現(xiàn)在我們還是在學(xué)習(xí)HTML的階段，css先不用管它，等學(xué)到了，自然就知道了。

標(biāo)簽

就是表格的標(biāo)題，如果你要給你的表格一個(gè)標(biāo)題，就把作為標(biāo)簽的第一個(gè)子元素。

也就是說(shuō)，

要寫在所有標(biāo)簽的前面。

如果你要給表格設(shè)置寬度，就可以在

標(biāo)簽上寫上width屬性，給你一個(gè)你想要的寬度數(shù)值。比如我把表格的寬度設(shè)為500像素：俺是一個(gè)表哥 A B C D E F G H I J K L

瀏覽器中效果如下：

標(biāo)簽標(biāo)簽和標(biāo)簽是同一個(gè)級(jí)別。是普通的單元格，而也是單元格，但是它相當(dāng)于是一個(gè)表示標(biāo)題的單元格。

不是說(shuō)

是標(biāo)題嗎？

沒(méi)錯(cuò)啊！是表示整個(gè)表格的標(biāo)題。

而相當(dāng)于一列單元格的標(biāo)題。

注意：既然也是單元格，那么它就要寫在當(dāng)中。通常把所在的放在所有其他的前面。里面的文字，顯示出來(lái)默認(rèn)是加粗的，而是是居中顯示的。

現(xiàn)在我把

加上：俺是一個(gè)大表哥 俺是小標(biāo)題 俺是小標(biāo)題 俺是小標(biāo)題 俺是小標(biāo)題 A B C D E F G H I J K L

在瀏覽器中效果如下：

注意：也有一些人，這樣寫：

小標(biāo)題 小標(biāo)題 小標(biāo)題 小標(biāo)題

這種寫法也可以用，但是實(shí)際上是沒(méi)有真正理解

。

一定要記住，和是同一個(gè)級(jí)別，上面這樣寫，就讓和成同一個(gè)級(jí)別了。

最關(guān)鍵的時(shí)，這樣寫容易引起效果的錯(cuò)亂，有時(shí)候錯(cuò)亂了，你還得想辦法搞正常，這就是理解不到位，寫法不規(guī)范給自己找的不必要的麻煩。

本次表格標(biāo)簽的介紹，全部代碼貼上：

表格標(biāo)簽俺是一個(gè)大表哥 俺是小標(biāo)題 俺是小標(biāo)題 俺是小標(biāo)題 俺是小標(biāo)題 A B C D E F G H I J K L

感謝閱讀！知識(shí)總結(jié)不易，請(qǐng)點(diǎn)個(gè)贊或轉(zhuǎn)發(fā)鼓勵(lì)一下唄！想系統(tǒng)性學(xué)習(xí)前端的小伙伴可以關(guān)注我！

總結(jié)

以上是生活随笔為你收集整理的标签的宽度_27 表格标签的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。