表格

简介: 表格

基本表格

基本表格即标准分割的表格,无合并单元格等格式,规整的行列结构。


基本表格语法:

|表头1|表头2|表头3|……|表头n|
|-----|-----|-----|-----|-----|
|列1|列2|列3|……|列n|
|列1|列2|列3|……|列n|点击复制复制失败已复制


实际效果:

表头1 表头2 表头3 …… 表头n
列1 列2 列3 …… 列n
列1 列2 列3 …… 列n


居中显示:

|表头1|表头2|表头3|……|表头n|
|:-----:|:-----:|:-----:|:-----:|:-----:|
|列1|列2|列3|……|列n|
|列1|列2|列3|……|列n|点击复制复制失败已复制


实际效果:

表头1 表头2 表头3 …… 表头n
列1 列2 列3 …… 列n
列1 列2 列3 …… 列n


复杂表格

markdown 基本语法中不支持复杂表格,但是可以嵌入 html ,可以使用 html 来间接的实现复杂表格展示。

<style>th{text-align:center}td{text-align:center}</style>
<table>
<thead><tr><th>A</th><th>B</th><th>C</th></tr></thead>
<tbody>
  <tr><td>占位符</td><td colspan="2">合并了两列</td></tr>
  <tr><td rowspan="2" colspan="2">合并了两行两列</td><td>普通文本</td></tr>
  <tr><td><b>加粗</b></td></tr>
</tbody>
<table>点击复制复制失败已复制


实际效果:

A B C
占位符 合并了两列
合并了两行两列 普通文本
加粗


上述代码没有任何问题,但是在vscode中用格式化功能之后会导致其增加莫名的换行,导致不能正常显示,实测下来只需要保持tab缩进不超过2个即可,可以使用如下的代码:

<style>th{text-align:center}td{text-align:center}</style>
<table>
  <tr><th>章节</th><th>教材内容</th><th>考纲要求</th></tr>
  <tr><td>占位符</td><td colspan="2">合并了两列</td></tr>
  <tr><td rowspan="2" colspan="2">合并了两行两列</td><td>普通文本</td></tr>
  <tr><td><b>加粗</b></td></tr>
</table>点击复制复制失败已复制


这样下来显示没有任何问题,就是不太符合语法。

章节 教材内容 考纲要求
占位符 合并了两列
合并了两行两列 普通文本
加粗
目录
相关文章
|
6月前
|
JavaScript 前端开发 PHP
表格表单
表格表单
57 1
|
2月前
表格的表头
表格的表头。
19 4
|
2月前
有标题的表格
有标题的表格。
19 3
|
4月前
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
251 0
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
elementui表格自定义表头的两种方法
这篇文章主要是总结了elementui-table表格怎么自定义表头,两种方式需求不一样,大家还有啥好的方法或者遇到的bug评论区留言大家一起解决。
964 0
|
SQL 自然语言处理 搜索推荐
|
监控 数据可视化 前端开发
S2 1.0:这个表格 「不简单」
S2 1.0:这个表格 「不简单」
284 0
|
数据安全/隐私保护
表格与表单
表格与表单
90 0