html table

最新推荐文章于 2024-08-25 09:57:22 发布

qq_40055200

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量186

点赞数 2

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_40055200/article/details/121497909

版权

今天需要手写一个table 共享table知识点~

总体来讲就是一行一行写<tr></tr>

table标签定义HTML表格，<table></table>
由tr,td,th元素组成（tr:表格行，th:表头，td单元格）
border：表格边框的宽度
width:表格的宽度
cellspacing:单元格之间的空白
cellpading:单元格和内容之间的空白
colspan:跨行
rowspan:跨列

代码如下

<template>
  <div class="wrapper">

    <!-- 页面头部开始 -->
    <div class="feedback-BG">
      <div class="feedback-title">1</div>
      <div class="feedback-subtitle">1</div>
    </div>
    <!-- 页面头部结束 -->

    <!-- 页面中部开始 -->
    <div class="wrapper-feedback-bottom">
      <table border="0" cellspacing="0" cellpadding="0" bordercolor="#000000">
        <tr>
          <th colspan="3" class="bgChangeColor">1</th>
          <th class="bgChangeColor">2</th>
          <th class="bgChangeColor">3</th>
          <th class="bgChangeColor">4</th>
        </tr>

        <!-- 操作反馈开始 -->
        <tr>
          <td rowspan="25" class="bgChangeColor" width="100px">5</td>
          <td rowspan="5" class="bgChangeColor">6</td>
          <td rowspan="5" class="bgChangeColor">7</td>
          <td class="bgColor">8</td>
          <td class="bgColor">9</td>
          <td class="bgColor">10</td>
        </tr>
        <tr>
          <td class="bgColor">11</td>
          <td class="bgColor">12</td>
          <td class="bgColor">13</td>
        </tr>
        <tr>
          <td class="bgColor">14</td>
          <td class="bgColor">15</td>
          <td class="bgColor">16</td>
        </tr>
        <tr>
          <td class="bgColor">17</td>
          <td class="bgColor">17</td>
          <td class="bgColor">8</td>
        </tr>
        <tr>
          <td class="bgColor">19</td>
          <td class="bgColor">20</td>
          <td class="bgColor">21</td>
        </tr>

        <tr>
          <td rowspan="9" class="bgChangeColor">22</td>
          <td rowspan="9" class="bgChangeColor">23</td>
          <td class="bgColor">24</td>
          <td class="bgColor">25</td>
          <td class="bgColor">26</td>
        </tr>
        <tr>
          <td class="bgColor">27</td>
          <td class="bgColor">28</td>
          <td class="bgColor">29</td>
        </tr>
        <tr>
          <td class="bgColor">30</td>
          <td class="bgColor">23</td>
          <td class="bgColor">33</td>
        </tr>
        <tr>
          <td class="bgColor">34</td>
          <td class="bgColor">35</td>
          <td class="bgColor">36</td>
        </tr>
        <tr>
          <td class="bgColor">37</td>
          <td class="bgColor">38</td>
          <td class="bgColor">39</td>
        </tr>
        <tr>
          <td class="bgColor">40</td>
          <td class="bgColor">41</td>
          <td class="bgColor">42</td>
        </tr>
        <tr>
          <td class="bgColor">42</td>
          <td class="bgColor">44</td>
          <td class="bgColor">45</td>
        </tr>
        <tr>
          <td class="bgColor">46</td>
          <td class="bgColor">47</td>
          <td class="bgColor">48</td>
        </tr>
        <tr>
          <td class="bgColor">49</td>
          <td class="bgColor">50</td>
          <td class="bgColor">51</td>
        </tr>

        <tr>
          <td rowspan="6" class="bgChangeColor">52</td>
          <td rowspan="6" class="bgChangeColor">53</td>
          <td class="bgColor">54</td>
          <td class="bgColor">55</td>
          <td class="bgColor">56</td>
        </tr>
        <tr>
          <td class="bgColor">57</td>
          <td class="bgColor">58</td>
          <td class="bgColor">59</td>
        </tr>
        <tr>
          <td class="bgColor">必</td>
          <td class="bgColor">必</td>
          <td class="bgColor">标签</td>
        </tr>
        <tr>
          <td class="bgColor">式</td>
          <td class="bgColor">0</td>
          <td class="bgColor">标签</td>
        </tr>
        <tr>
          <td class="bgColor">点</td>
          <td class="bgColor">入</td>
          <td class="bgColor">窗</td>
        </tr>
        <tr>
          <td class="bgColor">点全</td>
          <td class="bgColor">)</td>
          <td class="bgColor">窗</td>
        </tr>

        <tr>
          <td rowspan="3" class="bgChangeColor">0</td>
          <td rowspan="3" class="bgChangeColor">..</td>
          <td class="bgColor">执</td>
          <td class="bgColor">正</td>
          <td class="bgColor">有</td>
        </tr>
        <tr>
          <td class="bgColor">上</td>
          <td class="bgColor">正</td>
          <td class="bgColor">模</td>
        </tr>
        <tr>
          <td class="bgColor">发中</td>
          <td class="bgColor">送</td>
          <td class="bgColor">有</td>
        </tr>

        <tr>
          <td rowspan="2" class="bgChangeColor">操</td>
          <td rowspan="2" class="bgChangeColor">组.</td>
          <td class="bgColor">鼠标</td>
          <td class="bgColor">图</td>
          <td class="bgColor">气</td>
        </tr>
        <tr>
          <td class="bgColor">点</td>
          <td class="bgColor">双</td>
          <td class="bgColor">非</td>
        </tr>
        <!-- 操作反馈结束 -->

        <!-- 异常状态开始 -->
        <tr>
          <td rowspan="25" class="bgChangeColor">异常</td>
          <td rowspan="5" class="bgChangeColor">7</td>
          <td class="bgChangeColor">Web</td>
          <td class="bgColor">p</td>
          <td class="bgColor">似</td>
          <td class="bgColor">非</td>
        </tr>

        <tr>
          <td rowspan="4" class="bgChangeColor">App</td>
          <td rowspan="4" class="bgColor">App</td>
          <td class="bgColor">网试</td>
          <td class="bgColor">缺</td>
        </tr>
        <tr>
          <td class="bgColor">当</td>
          <td class="bgColor">ti</td>
        </tr>
        <tr>
          <td class="bgColor">似</td>
          <td class="bgColor">非</td>
        </tr>
        <tr>
          <td>蜂</td>
          <td class="bgColor">模</td>
        </tr>

        <tr>
          <td rowspan="2" class="bgChangeColor">空</td>
          <td rowspan="2" class="bgChangeColor">We</td>
          <td class="bgColor">用</td>
          <td class="bgColor">你</td>
          <td class="bgColor">页</td>
        </tr>
        <tr>
          <td class="bgColor">搜</td>
          <td class="bgColor">没</td>
          <td class="bgColor">页</td>
        </tr>

        <tr>
          <td rowspan="2" class="bgChangeColor">加载</td>
          <td rowspan="2" class="bgChangeColor">Web、App</td>
          <td class="bgColor">加</td>
          <td class="bgColor">努</td>
          <td class="bgColor">非</td>
        </tr>
        <tr>
          <td class="bgColor">加</td>
          <td class="bgColor">服</td>
          <td class="bgColor">非</td>
        </tr>

        <tr>
          <td class="bgChangeColor">流</td>
          <td class="bgChangeColor">App</td>
          <td class="bgColor">流</td>
          <td class="bgColor">当</td>
          <td class="bgColor">非</td>
        </tr>

        <tr>
          <td class="bgChangeColor">版</td>
          <td class="bgChangeColor">App</td>
          <td class="bgColor">长</td>
          <td class="bgColor">你定</td>
          <td class="bgColor">模</td>
        </tr>

        <tr>
          <td class="bgChangeColor">操作失败</td>
          <td class="bgChangeColor">Web、App</td>
          <td class="bgColor">操</td>
          <td class="bgColor">操</td>
          <td class="bgColor">非模态</td>
        </tr>

        <tr>
          <td rowspan="2" class="bgChangeColor">无</td>
          <td rowspan="2" class="bgChangeColor">Web、App</td>
          <td class="bgColor">非</td>
          <td class="bgColor">暂</td>
          <td class="bgColor">非示</td>
        </tr>
        <tr>
          <td class="bgColor">当前</td>
          <td class="bgColor">你~</td>
          <td class="bgColor">非</td>
        </tr>

        <tr>
          <td class="bgChangeColor">功</td>
          <td class="bgChangeColor">Web、App</td>
          <td class="bgColor">功中</td>
          <td class="bgColor">即将</td>
          <td class="bgColor">非</td>
        </tr>
        <!-- 异常状态结束 -->
      </table>
    </div>
    <!-- 页面中部结束 -->
  </div>
</template>

<script>
export default {
  name: "feedback"
}
</script>

<style scoped>
// @import '../styles/nav-wrapper.css';
.wrapper{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.feedback-BG{
    background: url("../public/assets/fkjz_banner.jpg");
    height: 160px;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 30px;
    padding-left: 60px;
}
.wrapper-feedback-bottom{
    flex: 1;
    padding: 0px 20px;
    display: flex;
}
.feedback-title{
    font-size: 32px;
    color: #09102B;
    letter-spacing: 0;
    text-align: justify;
    line-height: 40px;
}
.feedback-subtitle{
    font-size: 13px;
    color: #667186;
    letter-spacing: 0;
    line-height: 22px;
    margin-top: 10px;
}
table{
    text-align: center;
    border-collapse: collapse;
    width: 100%;
    margin: 32px;
    background-color: #FFFFFF;
}
td,th{
    border:1px solid #000000;
}
.bgChangeColor{
    background-color: #dfe2e5;
}
.bgColor{
    background-color: #FFFFFF;
}

</style>

qq_40055200

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html table

今天需要手写一个table 共享table知识点~总体来讲就是一行一行写<tr></tr>table标签定义HTML表格，<table></table> 由tr,td,th元素组成（tr:表格行，th:表头，td单元格） border：表格边框的宽度 width:表格的宽度 cellspacing:单元格之间的空白 cellpading:单元格和内容之间的空白 colspan:跨行 rowspan:跨列代码如下<tem...
复制链接

扫一扫