前端表格table

深藏阁楼爱情的钟 2022-09-03 14:24 263阅读 0赞

# 表格简介： #

*  ### table表格标签名，整个表格 ###
 *  ### tr表格中的一行 ###
 *  ### td表格中的一列 ###

**合并单元格：**rowspan纵向合并单元格，colspan横向合并单元格

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

# 长表格： #

*  thead-->头部（列可以不用td而是用th表示标题）
 *  tbody-->主题
 *  tfoot-->尾部

<table>
            <thead>
                <tr>
                    <th>日期</th>
                    <th>事件1</th>
                    <th>事件2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>...</td>
                    <td>...</td>
                    <td>....</td>
                </tr>
            </tfoot>
        </table>

# 表格的样式： #

**table:**

width: 50%;整个表格的宽度，单元格会等比例缩放

border: \#fff 1px solid;整个表格个的外边框

margin: 0 auto;整个表格的外边距

border-spacing: 0px;表格的两个单元格的距离

border-collapse: collapse;两个单元格边框合并成一个边框

**tr:**

background-color: \#bfa;设置一行颜色

**td:**

border: solid 1px black;单元格边框

height: 100px;单元格高度，设置高度后文字默认居中

vertical-align: top;设置单元格内容位置，可以是文字或者其他块

text-align: center;设置单元格文字位置

**拓展：**其他块可以用 display:table-cell,然后用 vertical-align: top;来设置子元素的位置

发表评论取消回复

表情：

评论列表（有 0 条评论，263人围观）

还没有评论，来说两句吧...

相关阅读

相关前端vue2.0表格Table如何校验

我们知道表单form可以写rules进行校验，比如非空校验，那么表格table如何进行校验了，我们难道用form表单嵌套table来利用form的校验语法来校验吗? 其实不必

刺骨的言语ヽ痛彻心扉/ 2024年04月03日 10:31/ 0 赞/ 43 阅读

相关 table表格

一、table的table-layout属性： 1、table-layout: fixed;表示平均分配。列数不定，宽度自动平均分配： table {

骑猪看日落/ 2023年01月16日 02:58/ 0 赞/ 210 阅读

相关 table表格编辑

<vxe-table border show-overflow

约定不等于承诺〃/ 2022年09月09日 00:09/ 0 赞/ 250 阅读

相关前端表格table

表格简介： table表格标签名，整个表格 tr表格中的一行 td表格中的一列合并单元格：rowspan纵向合并单元格，colspan横

深藏阁楼爱情的钟/ 2022年09月03日 14:24/ 0 赞/ 264 阅读

相关 table表格行号

以新浪微博的源码章节示例 <div class="finance-pt">

你的名字/ 2022年06月07日 12:44/ 0 赞/ 261 阅读

相关 HTML表格table

什么是表格？表格是由行和列排列而成的一种结构，按照行和列呈现数据，从而进行页面布局。这种布局方式已经过时。建议使用div+css实现页面布局。如何创建HTML表格：H

淡淡的烟草味﹌/ 2022年05月15日 00:30/ 0 赞/ 365 阅读

相关 Data-table表格

Table 表格：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。 1、基础表格当el-table元素中注入data对象数组后（多行数据存成一

旧城等待，/ 2022年04月10日 13:26/ 0 赞/ 445 阅读

相关【CSS】Table（表格）

表格边框指定CSS表格边框，使用border属性。下面的例子指定了一个表格的Th和TD元素的黑色边框： table, th, td { b

素颜马尾好姑娘i/ 2022年04月10日 07:37/ 0 赞/ 323 阅读

相关 Table表格

table表格现状主要用在网页布局上，但是随着Web2.0时代的到来，表格已经被摒弃了，现在主要开始使用的是“DIV+CSS”模式。常用的

亦凉/ 2021年11月11日 11:01/ 0 赞/ 484 阅读

相关 js操作表格、table、

js添加一行、删除一行 let str="<tr>"

心已赠人/ 2021年11月01日 08:48/ 0 赞/ 475 阅读