Markdown表格语法实现方式

一、原生方式

语法格式

|项目|价格|数量|
|:---|---:|:---:|
|iPhone|6000元  |3  |
|iPad  |3000元  |4  |
|iMac  |10000元 |5  |
可简化,取消行两侧管道符号"|"
项目|价格|数量
:-|-:|:-:
iPhone|6000元  |3  
iPad  |3000元  |4  
iMac  |10000元 |5  

语法说明

  1. 不管是哪种方式,第一行为表头,第二行分隔表头和主体部分,第三行开始每一行代表一个表格行;
  2. 分隔表头“-”至少有一个
  3. 列与列之间用管道符号 “|” 隔开,原生方式的表格每一行的两边也要有管道符。
  4. 可在第二行指定不同列单元格内容的对齐方式,默认为左对齐,在 “-” 右边加上 “:” 为右对齐,在 “-” 两侧同时加上 “:” 为居中对齐。

表现

项目价格数量
iPhone6000元3
iPad3000元4
iMac10000元5

二、利用HTML<table>标签


表现丰富

列宽 width=20% 表头居中 style="text-align:center" 居右列3
设置背景色 bgcolor=rgb(92, 184, 92)bgcolor=#eea236bgcolor=pink
合并列 起始列colspan=2 align=center
合并行
起始行rowspan=3
align=centerth无效cellcell
style="text-align:right"cell合并行 rowspan=2
cellcell
cellcellcellcell
可设置 列宽(通过th、td均可以设置)、 单元格背景色、合并列、合并行

代码展示

<table>
   <tr>
        <th width=20%>列宽 `width=20%`</th>
        <th width=45% style="text-align:center">表头居中 `style="text-align:center"`</th>
        <th widht=20% style="text-align:right">居右</th>
        <th widht=5%>列3</th>
   </tr>
   <tr>
        <td >设置背景色 </td>
        <td bgcolor=rgb(92, 184, 92)>`bgcolor=rgb(92, 184, 92)`</td>
        <td bgcolor=#eea236>`bgcolor=#eea236`</td>
        <td bgcolor=pink>`bgcolor=pink`</td>
   </tr>
   <tr>
        <td>**合并列**</td>
        <td colspan=3 align=center> `起始列colspan=2` `align=center`</td>
   </tr>
   <tr>
        <td rowspan=3>**合并行** <br>`起始行rowspan=3`</td>
        <td align=center>`align=center`对`th`无效</td>
        <td>cell</td>
        <td>cell</td>
   </tr>
   <tr>
        <td style="text-align:right">`style="text-align:right"`</td>
        <td>cell</td>
        <td rowspan=2>合并行 `rowspan=2`</td>
   </tr>
   <tr>
        <td>cell</td>
        <td>cell</td>
   </tr>
   <tr><td>cell</td><td>cell</td><td>cell</td><td>cell</td></tr>
</table>
刚发现segmentfault表格不支持背景色

markdown_talbe

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值