html表格元素的基本知識點二?成長是一輩子的事兒大家好我是時問新分享前端、Python等技術，以及個人成長路上的那些事兒，今天小編就來說說關于html表格元素的基本知識點二?下面更多詳細答案一起來看看吧!
成長是一輩子的事兒！大家好！我是時問新。分享前端、Python等技術，以及個人成長路上的那些事兒。
表格是可以進行單元格的合并的。
比如下圖所示：
單元格A跨了兩列，單元格E跨了兩行。這就是單元格的合并。
colspan屬性
colspan屬性用來設置td或者th的列跨度。
col就是列的意思，span就是跨度的意思。
所以colspan就是表示跨了多少列的屬性。
比如下圖：
單元格A橫跨了兩列，單元格E橫跨了三列。這個表格如何實現呢？
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>合并單元格</title>
<style>
table,tr,td{
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1" width="400">
<tr>
<td colspan="2">A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td colspan="3">E</td>
</tr>
<tr>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
</table>
</body>
</html>
在浏覽器中效果如下：
所以，一個單元格跨了幾列，colspan屬性的值就是幾。
我們看到上面這個表格：
第一行的小格A，跨了2列，也就是說A一個頂2個單元格，B和C都是正常的1個單元格，2 1 1=4，相當于這一行總共是4個單元格。
第二行的小格E，跨了3列，就是E一個小格頂3個單元格，D是正常的1列，就是1個單元格，1 3=4，相當于這一行總共也是4個單元格。
第三行的F、G、H、I，都是正常的1列，也就是各占一個單元格，1 1 1 1=4，相當于這一行總共也是4個單元格。
明白了吧，每一行所占的單元格總數是一樣的，隻是某些小格，一個頂幾個單元格，這就是colspan屬性的作用----合并單元格。colspan屬性寫在td上。
rowspan屬性
rowspan屬性用來設置td或者th的行跨度。
比如下圖所示的表格：
F跨了2行，H跨了3行。
注意：F和H都是屬于第2行，這一點一定要清楚。
判斷某一個跨行的小格屬于第幾行，就看它的起點在第幾行，它就屬于第幾行。比如上圖中，F和H起點都是第2行。
那麼上圖所示的表格，我來捋一捋每一行包括哪些小格：
上圖表格總共有4行。
第一行是ABCD一個小格。
第二行是EFGH四個小格。
第三行隻有I和J兩個小格。正常情況下，I和J是緊挨着的，但是因為F跨行往下侵占了第三行的位置，所以把它們隔開了。
第四行隻有KLM三個小格。
我用同一種顔色把屬于同一行的小格圈出來：
這是為了更直觀地演示，哪個小格屬于哪一行。
但是相信不用給可以圈出來，你已經很清楚的知道了如何去判斷。
當你能很清楚地知道哪個小格屬于第幾行之後，也就是說，能很清楚的知道第幾行包括哪些小格，這樣就能很清楚的寫出代碼了。
比如上圖的表格，
我們已經知道了第一行包括A、B、C、D四個小格，
第二行包括E、F、G、H四個小格，
第三行包括I、J兩個小格，
第四行包括K、L、M三個小格。
表格有幾行就用幾個tr标簽對兒，每一行就是一個tr标簽對兒。
每一行有幾個小格，就在tr标簽對兒裡面寫幾個td标簽對兒。
然後哪個小格是跨列或者跨行的，把colspan或rowspan屬性寫到上面就行了。
按照這個思路，代碼就很好寫了，上面跨行的表格的實現代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>合并單元格</title>
<style>
table,tr,td{
border-collapse: collapse;
}
</style>
</head>
<body>
<!-- 跨列的表格 -->
<h2>跨列的表格</h2>
<table border="1" width="400">
<tr>
<td colspan="2">A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td colspan="3">E</td>
</tr>
<tr>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
</table>
<!-- 跨行的表格 -->
<h2>跨行的表格</h2>
<table border="1" width="400">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td rowspan="2">F</td>
<td>G</td>
<td rowspan="3">H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td>K</td>
<td>L</td>
<td>M</td>
</tr>
</table>
</body>
</html>
在浏覽器中效果如下：
同時有rowspan和colspan屬性
單元格是可以同時具有rowspan和colspan屬性的，也就是可以同時跨行又跨列。
比如下圖所示的表格：
這個表格中，F跨了兩行，G既跨了三行，又跨了兩列。
那麼G就是同時具有rowspan和colspan屬性的。
但是，還是那個關鍵的問題----你是否能夠分清楚，哪個小格是屬于哪個行的？
還是根據小格的起點去判斷，起點在哪行，它就屬于哪行。
所以，
這個表格，第一行包括A、B、C、D四個小格。
第二行包括E、F、G三個小格。
第三行隻包括H一個小格。
第四行隻包括I、J兩個小格。
這個表格總共4行，所以寫4個tr标簽對兒。
第一行4個小格，所以第一個tr标簽對兒中寫4個td标簽對兒。
第二行3個小格，所以第二個tr标簽對兒中寫3個td标簽對兒。
第三行1個小格，所以第三個tr标簽對兒中寫1個td标簽對兒。
第四行2個小格，所以第四個tr标簽對兒中寫2個td标簽對兒。
F跨兩行，隻需要在F所在的td上寫rowspan="2"。
G跨三行兩列，同時在G所在的td上寫rowspan="3"以及colspan="2"。
其他單元格什麼屬性也沒有。
按照這個思路，代碼就很好寫啦：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>合并單元格</title>
<style>
table,tr,td{
border-collapse: collapse;
}
</style>
</head>
<body>
<!-- 跨列的表格 -->
<h2>跨列的表格</h2>
<table border="1" width="400">
<tr>
<td colspan="2">A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td colspan="3">E</td>
</tr>
<tr>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
</table>
<!-- 跨行的表格 -->
<h2>跨行的表格</h2>
<table border="1" width="400">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td rowspan="2">F</td>
<td>G</td>
<td rowspan="3">H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td>K</td>
<td>L</td>
<td>M</td>
</tr>
</table>
<!-- 同時具有跨行和跨列的表格 -->
<h2>同時具有跨行和跨列的表格</h2>
<table border="1" width="400">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td rowspan="2">F</td>
<td rowspan="3" colspan="2">G</td>
</tr>
<tr>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
</tr>
</table>
</body>
</html>
在浏覽器中顯示效果如下：
補充說明：
為了讓這三個表格顯示的時候不擠在一起，擠在一起不好看，我在每個表格的前面加了一個h2标簽，為什麼不用h1标簽呢？因為HTML規範，每個頁面隻允許有一個h1标簽，而h2可以有多個。
感謝閱讀！知識總結不易，請點個贊或轉發鼓勵一下呗！想系統性學習前端的小夥伴可以關注我！
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
