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