整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
Markdown表格的語法如下：
| | | | |
| - | - | - | - |
| | | | |顯示效果如下：
姓名 | 性別 | 年齡 | 生日 |
張小凡 | 男 | 13 | - |
陸雪琪 | 女 | 16 | - |
碧瑤 | 女 | 15 | - |
我們可以:在第二行，也就是表頭下面的一行，去規(guī)定它是左對(duì)齊，右對(duì)齊，或者是居中，分別是:-，-:，:-:，除此之外，就沒有其他的控制的方式了，markdown對(duì)于表格的控制是比較弱的，比如說表格的合并，markdown自身就無能為力了，好在它支持html的語法，我們也可以實(shí)現(xiàn)表格的控制。
姓名 | 性別 | 年齡 | 生日 |
張小凡 | 男 | 13 | - |
陸雪琪 | 女 | 16 | - |
碧瑤 | 女 | 15 | - |
html之中，使用table作為表格
table表示表格，里面的元素有表頭，行，單元格
th表示表頭，tr表示行，td表示單元格
第1列 | 第2列 | 第3列 | 第4列 |
1 | 2 | 3 | 第4列 |
1 | 2 | 3 | 第4列 |
1 | 2 | 3 | 第4列 |
1 | 2 | 3 | 第4列 |
<table>
<th>第1列</th><th>第2列</th><th>第3列</th><th>第4列</th>
<tr>
<td>1</td><td>2</td><td>3</td><td>第4列</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>第4列</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>第4列</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>第4列</td>
</tr>
</table>同一行的單元格要合并，那就是一個(gè)單元格，占多個(gè)單元格的位置，位置是span，就可以使用colspan="x"，來表示所在的單元格占多少個(gè)格子。
第1列 | 第2列 | 第3列 | 第4列 |
1 | 2 | 3 | 第4列 |
1 | 第4列 | ||
1 | 2 | 3 | 第4列 |
1 | 2 | 3 | 第4列 |
<table>
<th>第1列</th><th>第2列</th><th>第3列</th><th>第4列</th>
<tr>
<td>1</td><td>2</td><td>3</td><td>第4列</td>
</tr>
<tr>
<td colspan="3">1</td><td>第4列</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>第4列</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>第4列</td>
</tr>
</table>同一列的單元格要合并，那就是一個(gè)單元格，占多行單元格的位置，位置是span，就可以使用rowspan="x"，來表示所在的單元格占多少個(gè)列方向的單元格。
第1列 | 第2列 | 第3列 | 第4列 |
1 | 2 | 3 | 第4列 |
1 | 2 | 3 | 第4列 |
1 | 2 | 3 | |
1 | 2 | 3 |
<table>
<th>第1列</th><th>第2列</th><th>第3列</th><th>第4列</th>
<tr>
<td>1</td><td>2</td><td>3</td><td>第4列</td>
</tr>
<tr>
<td rowspan="3">1</td><td>2</td><td>3</td><td>第4列</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>這個(gè)時(shí)候，就需要把colspan="x"和rowspan="x"，同時(shí)使用了，下面是二者沒有關(guān)系的一種情況。
第1列 | 第2列 | 第3列 | 第4列 |
1 | 2 | 3 | |
1 | 2 | 3 | 第4列 |
1 | 2 | 3 | |
1 | 2 | 3 | |
<table>
<th>第1列</th><th>第2列</th><th>第3列</th><th>第4列</th>
<tr>
<td>1</td><td>2</td><td colspan="2">3</td>
</tr>
<tr>
<td rowspan="3">1</td><td>2</td><td>3</td><td>第4列</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>下面是二者之間相互關(guān)聯(lián)的一種情況。
第1列 | 第2列 | 第3列 | 第4列 |
1 | 2 | 3 | 第4列 |
1 | 2 | ||
1 | |||
1 | |||
<table>
<th>第1列</th><th>第2列</th><th>第3列</th><th>第4列</th>
<tr>
<td>1</td><td>2</td><td>3</td><th>第4列</th>
</tr>
<tr>
<td colspan=3 rowspan=3>1</td><td>2</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
</table>分析：主要是縱向的表格的合并，文字放置在表格的中間，表格頭背景顏色設(shè)為粉紅色，然后表頭文字是紅色。我們開始實(shí)現(xiàn)。
效果
1.先去處理第一列的單元格，占據(jù)3個(gè)單元格，整體的顯示效果和代碼如下：
派別 | 姓名 | 年齡 | 性別 | 武器 |
1 | 2 | 3 | 4 | 5 |
2 | 3 | 4 | 5 | |
2 | 3 | 4 | 5 |
<table>
<th>派別</th><th>姓名</th><th>年齡</th><th>性別</th><th>武器</th>
<tr>
<!-- 列的方向占據(jù)3個(gè)cell -->
<td rowspan='3'>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
<td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
<td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
</table>2.然后處理第4列的兩個(gè)單元格，也是縱向的，合并的單元格，會(huì)自動(dòng)占據(jù)它所合并的方向的位置，相應(yīng)的位置，計(jì)算的時(shí)候會(huì)在下一行或者相鄰的列里面也計(jì)算在內(nèi)，它下面的一個(gè)元素，自動(dòng)跟在這個(gè)“隱藏元素”的后面。比如青云山，男這兩個(gè)元素的位置，就體現(xiàn)了這個(gè)原則。整體的顯示效果和代碼如下：
派別 | 姓名 | 年齡 | 性別 | 武器 |
青云山 | 2 | 3 | 男 | 5 |
2 | 3 | 5 | ||
2 | 3 | 4 | 5 | |
1 | 2 | 3 | 4 | 5 |
<table>
<th>派別</th><th>姓名</th><th>年齡</th><th>性別</th><th>武器</th>
<tr>
<!-- 列的方向占據(jù)3個(gè)cell -->
<td rowspan='3'>青云山</td><td>2</td><td>3</td><td rowspan='2'>男</td><td>5</td>
</tr>
<tr>
<td>2</td><td>3</td><td>5</td>
</tr>
<tr>
<td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
</table>3.然后我們實(shí)現(xiàn)居中，使用style，對(duì)于整個(gè)table設(shè)置，也可以對(duì)某個(gè)tr，或者某一個(gè)td使用，越小的控制，起作用的優(yōu)先級(jí)越高，比如第2行，設(shè)置向右對(duì)齊，它的優(yōu)先級(jí)高于整個(gè)table的設(shè)置。整體的顯示效果和代碼如下：
派別 | 姓名 | 年齡 | 性別 | 武器 |
青云山 | 2 | 3 | 男 | 5 |
2 | 3 | 5 | ||
2 | 3 | 4 | 5 | |
1 | 2 | 3 | 4 | 5 |
<table style="text-align:center;">
<th>派別</th><th>姓名</th><th>年齡</th><th>性別</th><th>武器</th>
<tr>
<!-- 列的方向占據(jù)3個(gè)cell -->
<td rowspan='3'>青云山</td><td>2</td><td>3</td><td rowspan='2'>男</td><td>5</td>
</tr>
<tr style="text-align:right;">
<td>2</td><td>3</td><td>5</td>
</tr>
<tr>
<td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
</table>4.實(shí)現(xiàn)其他的表格合并的效果，整體的顯示效果和代碼如下：
派別 | 姓名 | 年齡 | 性別 | 武器 |
青云山 | 2 | 3 | 男 | 5 |
2 | 3 | 5 | ||
2 | 3 | 4 | 5 | |
1 | 2 | 3 | 男 | 5 |
鬼王宗 | 2 | 3 | 5 | |
2 | 3 | 4 | 5 |
<table style="text-align:center;">
<th>派別</th><th>姓名</th><th>年齡</th><th>性別</th><th>武器</th>
<tr>
<!-- 列的方向占據(jù)3個(gè)cell -->
<td rowspan='3'>青云山</td><td>2</td><td>3</td><td rowspan='2'>男</td><td>5</td>
</tr>
<tr>
<td>2</td><td>3</td><td>5</td>
</tr>
<tr>
<td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td rowspan=2>男</td><td>5</td>
</tr>
<tr>
<td rowspan=2>鬼王宗</td><td>2</td><td>3</td><td>5</td>
</tr>
<tr>
<td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
</table>5.填充數(shù)據(jù)
派別 | 姓名 | 年齡 | 性別 | 武器 |
青云山 | 張小凡 | 16 | 男 | 燒火棍 |
曾書書 | 17 | 軒轅 | ||
陸雪琪 | 18 | 女 | 天琊 | |
天音寺 | 普智 | 500 | 男 | 嗜血珠 |
鬼王宗 | 鬼王 | 1000 | 朱雀印 | |
碧瑤 | 15 | 女 | 傷心花 |
<table style="text-align:center;">
<th>派別</th><th>姓名</th><th>年齡</th><th>性別</th><th>武器</th>
<tr>
<!-- 列的方向占據(jù)3個(gè)cell -->
<td rowspan='3'>青云山</td><td>張小凡</td><td>16</td><td rowspan='2'>男</td><td>燒火棍</td>
</tr>
<tr>
<td>曾書書</td><td>17</td><td>軒轅</td>
</tr>
<tr>
<td>陸雪琪</td><td>18</td><td>女</td><td>天琊</td>
</tr>
<tr>
<td>天音寺</td><td>普智</td><td>500</td><td rowspan=2>男</td><td>嗜血珠</td>
</tr>
<tr>
<td rowspan=2>鬼王宗</td><td>鬼王</td><td>1000</td><td>朱雀印</td>
</tr>
<tr>
<td>碧瑤</td><td>15</td><td>女</td><td>傷心花</td>
</tr>
</table>6.修改表頭樣式，仍然是使用style，修改背景色background-color，字體顏色color就可以了。
派別 | 姓名 | 年齡 | 性別 | 武器 |
青云山 | 張小凡 | 16 | 男 | 燒火棍 |
曾書書 | 17 | 軒轅 | ||
陸雪琪 | 18 | 女 | 天琊 | |
天音寺 | 普智 | 500 | 男 | 嗜血珠 |
鬼王宗 | 鬼王 | 1000 | 朱雀印 | |
碧瑤 | 15 | 女 | 傷心花 |
<table style="text-align:center;">
<th style="background-color:#ffc7ce; color: #cb464b">派別</th>
<th style="background-color:#ffc7ce; color: #cb464b">姓名</th>
<th style="background-color:#ffc7ce; color: #cb464b">年齡</th>
<th style="background-color:#ffc7ce; color: #cb464b">性別</th>
<th style="background-color:#ffc7ce; color: #cb464b">武器</th>
<tr>
<!-- 列的方向占據(jù)3個(gè)cell -->
<td rowspan='3'>青云山</td><td>張小凡</td><td>16</td><td rowspan='2'>男</td><td>燒火棍</td>
</tr>
<tr>
<td>曾書書</td><td>17</td><td>軒轅</td>
</tr>
<tr>
<td>陸雪琪</td><td>18</td><td>女</td><td>天琊</td>
</tr>
<tr>
<td>天音寺</td><td>普智</td><td>500</td><td rowspan=2>男</td><td>嗜血珠</td>
</tr>
<tr>
<td rowspan=2>鬼王宗</td><td>鬼王</td><td>1000</td><td>朱雀印</td>
</tr>
<tr>
<td>碧瑤</td><td>15</td><td>女</td><td>傷心花</td>
</tr>
</table>以上就是實(shí)戰(zhàn)環(huán)節(jié)，完成了既定的目標(biāo)的表格的單元格合并與樣式的改造，over!
據(jù)說VLOOK可以，但是我測(cè)試了之后，不行，合并單元格功能無法正常使用。
如果你沒有html基礎(chǔ)，或者是覺得麻煩，或者是不太想去寫表格，沒關(guān)系，也有辦法，直接生成，按照目標(biāo)樣式自定義去合并，設(shè)置樣式，然后生成，拷貝到typora之中即可！！！方便快捷，省時(shí)省力！！！只需瀏覽器收藏url：https://www.tablesgenerator.com/html_tables，因?yàn)槲覀儸F(xiàn)在實(shí)現(xiàn)表格的合并，是通過html的語法來完成的，而tablesgenerator網(wǎng)站可以幫我們實(shí)現(xiàn)表格的合并，我們只需要復(fù)制其中的代碼，然后即可。
生成table
表格是一個(gè)非常重要的模塊，在早期被用來做頁面布局，后隨著div流體布局的出現(xiàn)逐漸被替代，但在數(shù)據(jù)展示上還發(fā)揮著重要作用，本次教程主要講解able表格基本屬性及跨行跨列合并。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
一、外邊距合并/Margin（空白邊）疊加 概念：
外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。
合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
二、外邊距合并常見的情況
1) 當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的底空白邊與第二個(gè)元素的頂空白邊發(fā)生疊加。
兩個(gè)元素同時(shí)設(shè)置了margin，上邊元素設(shè)置margin-bottom：20px;下邊元素設(shè)置margin-top:20px;最后的margin值仍然為20px，如果一個(gè)是30px.一個(gè)是20px,則最后以大的為準(zhǔn)。
2) 當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒有填充或邊框?qū)⒖瞻走叿指糸_），它們的頂和/或底空白邊也發(fā)生疊加。
注釋：只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
