HTML基礎(chǔ) - HTML表格

1.無表頭的表格 <table> <tr> <td>

<table>標(biāo)簽代表的是表
<tr>標(biāo)簽代表的是行
<td>標(biāo)簽代表的是列
在html頁面中的表格來著，就和excl的表格不一樣嘍，咱自己有自己的規(guī)則：
這就是沒有表頭，也就是最簡單的一個表格。（設(shè)置了邊框為1 ：border= “1”）

去掉多余框格線 cellspacing=”0”

這個時候咱們看表格中有些奇奇怪怪的框格對吧，怎么去掉他們呢：

這樣就舒服多啦。

表格在網(wǎng)頁居中顯示 align=“center”

上一張圖能看見，表格是在網(wǎng)頁的左上方顯示，那么顯示的位置怎么變換呢，比如使它居中顯示：

這就跑到頁面中部啦。

2.有表頭的表格 <th>

<th>表示就是表頭了哦，字體是加粗居中顯示的
在日常開發(fā)中，如果只有一個表格比較容易讓人不明所以，這時候就需要有表頭啦，表面這是個啥，或者說每一列代表了什么東西

3.有標(biāo)題的表格 <caption>

<caption>標(biāo)簽表示表頭
前面說了每一列是什么意思，現(xiàn)在需要有標(biāo)題了，標(biāo)題就是讓人明白這個表是啥意思，具體想干啥：

4.定義每一列的樣式 <colgroup> <col>

使用<colgroup>標(biāo)簽內(nèi)的<col>
例：
使一行為藍色

<col span="1" style="background-color: aqua;">

使兩行為橘色

<col span="2" style="background-color: orange;">

span等于幾，就是代表讓幾列變色

5.頁眉，主體，頁腳 <thead> <tbody> <tfoot>

<thead>頁眉標(biāo)簽，頁眉的位置是在文章的上部
<tbody>主體標(biāo)簽，表示內(nèi)容主題
<tfoot>頁腳標(biāo)簽，表示內(nèi)容最后
正常一般的文章呢也是這樣的，頁眉在上，頁腳在下，主題在中間。

其實有時候直接照文章從上到下的排列順序也可以達到這樣的要求，那么為什么非得定個什么頁眉標(biāo)簽<thead>，頁腳標(biāo)簽<tbody>和主題標(biāo)簽<tfoot>呢?
因為這些標(biāo)簽是用來固定我們的數(shù)據(jù)的，比如頁眉標(biāo)簽，只要我使用了，不管是代碼中放在哪里，它都能自己找到自己該在的位置，然后乖乖跑過去呆著，其他的也是一樣：

6.合并單元格 行 關(guān)鍵詞：colspan

首先呢，這是最原本的表格

現(xiàn)在呢，咱需要把“嘉文”和“提莫”合并在一起，并且取個新名字叫“嘉文四世”，
對比之前的圖片可以看見，刪除了“提莫”那一行數(shù)據(jù)，然后把原本的“嘉文”改成了“嘉文四世”，并且在與之對應(yīng)的<td>標(biāo)簽上增加了colspan=”2”。
注：colspan=“2” 代表合并兩個單元格，數(shù)字越往上加，代表合并單元格越多

7.合并單元格 列 關(guān)鍵詞：rowspan

首先呢，這是最原本的表格

現(xiàn)在呢，咱們需要把“金克斯”和“伊芙琳”給合并了，并且起個新名字叫“暴走蘿莉”。
和之前對比可以發(fā)現(xiàn)<td>標(biāo)簽新增了rowspan=”2”，并且刪除了原本的“金克斯”改成了“暴走蘿莉”，并且刪除了原本的“伊芙琳”那一行數(shù)據(jù)。
注：rowspan=“2” 代表合并兩個單元格，數(shù)字越往上加，代表合并單元格越多

總結(jié)

以上是生活随笔為你收集整理的HTML基础 - HTML表格的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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