table详解

1.tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。

 tr内是th还是td可由自己定义,th,td可存在于任一行,th与td的区别在与th字体更粗

 

2.定义一个table默认有border, cellspacing, cellpadding属性

  border(外边框粗细)

  类型:可为数字 数字字符串 带像素单位的字符串 eg: border= 5, border= "5", border= "5px",推荐使用border= "5",以免出现兼容性问题

  说明:默认1像素, border为0时table边框,td边框都消失,大于0时table边框为border值,td边框为1像素,小于0时外边框1像素

  

  cellspacing(规定单元格之间的空白)

  推荐类型: eg: cellspacing= "5", cellspacing= "4%"

  说明:默认2像素,cellspacing为0时td边框不会合并,会紧贴,大于0时单元格边距为设定值,小于0时为默认值

 

  cellpadding(规定单元边沿与其内容之间的空白)

  推荐类型: eg: cellpadding= "5", cellpadding= "4%"

  说明:默认1像素,cellpadding为0时td内会更紧,大于0时单元格边距为设定值,小于0时为0

 

3.可加入captain标签为table添加标题

eg:

<table border="6">
<caption>我的标题</caption>
<tr>
  <td>100</td><td>300</td>
</tr>
<tr>
  <td>400</td><td>600</td>
</tr>
</table>

 

4.可通过rowspan设置跨行,colspan设置跨列

eg: <td rowspan= "2"> </td>

  <td colspan= "3"></td>

其他属性诸如frame,rules等不建议使用

 

转载于:https://www.cnblogs.com/YzpJason/p/7058754.html

el-table是ElementUI中的一个表格组件,可以用于展示数据。它支持动态列渲染、排序、筛选、分页等功能。下面是el-table详解: 1. el-table的基本用法 ```html <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> ``` 2. el-table的动态列渲染 ```html <el-table :data="tableData"> <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column> </el-table> ``` ```javascript data() { return { columns: [ { prop: &#39;name&#39;, label: &#39;姓名&#39; }, { prop: &#39;age&#39;, label: &#39;年龄&#39; }, { prop: &#39;address&#39;, label: &#39;地址&#39; } ], tableData: [ { name: &#39;张三&#39;, age: 18, address: &#39;北京市&#39; }, { name: &#39;李四&#39;, age: 20, address: &#39;上海市&#39; }, { name: &#39;王五&#39;, age: 22, address: &#39;广州市&#39; } ] } } ``` 3. el-table的排序和筛选 ```html <el-table :data="tableData" :default-sort="{ prop: &#39;age&#39;, order: &#39;descending&#39; }"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄" sortable></el-table-column> <el-table-column prop="address" label="地址" :filters="[{ text: &#39;北京市&#39;, value: &#39;北京市&#39; }, { text: &#39;上海市&#39;, value: &#39;上海市&#39; }, { text: &#39;广州市&#39;, value: &#39;广州市&#39; }]" :filter-method="filterMethod"></el-table-column> </el-table> ``` ```javascript methods: { filterMethod(value, row, column) { return row.address === value; } } ``` 4. el-table的分页 ```html <el-table :data="tableData" :default-sort="{ prop: &#39;age&#39;, order: &#39;descending&#39; }" :pagination="{ pageSize: 2 }"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄" sortable></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值