菜单 搜索
首页 前端知识 HTML-table表格详解

HTML-table表格详解

2024-02-13 10:02:40 前端知识 前端哥 889 659 我要收藏

文章目录

  • 表格
    • 表格的说明(创建一个表格)
      • 1. 说明
      • 2. 设置
    • 表头和表格边框样式设置
      • 1. 设置
    • 长表格结构和补充
      • 1. 说明
      • 2. 结构
      • 3. 补充
    • 表格布局(被淘汰)
      • 1. 表格布局(已经被 CSS 淘汰)

表格

表格的说明(创建一个表格)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <table border="1" width="40%" align="center">
      <tr>
        <td>A1</td>
        <td>A2</td>
        <td>A3</td>
        <td>A4</td>
      </tr>
      <tr>
        <td>B1</td>
        <td>B2</td>
        <td>B3</td>
        <td rowspan="2">B4</td>
      </tr>
      <tr>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
      </tr>
      <tr>
        <td>D1</td>
        <td>D2</td>
        <td colspan="2">D3</td>
      </tr>
    </table>
  </body>
</html>
复制

请添加图片描述

1. 说明

  1. 表格在日常生活中使用非常多，比如 excel 就是专门用来创建表格的工具，
    • 表格就是由用来表示一些格式化的数据的，比如：额课程表，银行对账单
  2. 在网页中也可以创建出不同的表格。

2. 设置

  1. 在 HTML 中，使用 table 标签来创建一个表格
<table border="1" width="40%" align="center"></table>
复制
  1. 在 table 中使用 tr 来表示表格中的一行，有几行就有几个 tr
    • 在 tr 中需要使用 td 来创建一个单元格，有几个单元格就有几个 td
<tr>
  <td>A1</td>
  <td>A2</td>
  <td>A3</td>
</tr>
 
<tr>
  <td>B1</td>
  <td>B2</td>
  <td>B3</td>
</tr>
 
<tr>
  <td>C1</td>
  <td>C2</td>
  <td>C3</td>
</tr>
 
<tr>
  <td>D1</td>
  <td>D2</td>
  <td>D3</td>
</tr>
复制
  1. rowspan 用来设置的纵向的合并单元格
<td rowspan="2">B4</td>
复制
  1. colspan 横向的合并单元格
<td colspan="2">D3</td>
复制

表头和表格边框样式设置

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      table {
        width: 300px;
        /*居中*/
        margin: 0 auto;
        /*边框*/
        /* border: 1px solid black; */
 
        border-collapse: collapse;
        /*设置背景颜色*/
        /* background-color: #bfa; */
      }
 
      /*
       * 设置边框
       */
      td,
      th {
        border: 1px solid black;
      }
 
    /*
     * 设置隔行变色
     */
      tbody > tr:nth-child(even) {
        background-color: #bfa;
      }
 
    /*
     * 鼠标移入到tr以后，改变颜色
     */
      tr:hover {
        background-color: #ff0;
      }
    </style>
  </head>
  <body>
      <!-- 
      table是一个块元素
      -->
    <table>
      <tr>
      <!-- 
      可以使用th标签来表示表头中的内容，
      	它的用法和td一样，不同的是它会有一些默认效果
      -->
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>住址</th>
      </tr>
 
      <tr>
        <td>1</td>
        <td>孙悟空</td>
        <td>男</td>
        <td>花果山</td>
      </tr>
 
      <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>高老庄</td>
      </tr>
 
      <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>流沙河</td>
      </tr>
 
      <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>女儿国</td>
      </tr>
 
      <tr>
        <td>1</td>
        <td>孙悟空</td>
        <td>男</td>
        <td>花果山</td>
      </tr>
 
      <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>高老庄</td>
      </tr>
 
      <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>流沙河</td>
      </tr>
 
      <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>女儿国</td>
      </tr>
 
      <tr>
        <td>1</td>
        <td>孙悟空</td>
        <td>男</td>
        <td>花果山</td>
      </tr>
 
      <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>高老庄</td>
      </tr>
 
      <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>流沙河</td>
      </tr>
 
      <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>女儿国</td>
      </tr>
 
      <tr>
        <td>1</td>
        <td>孙悟空</td>
        <td>男</td>
        <td>花果山</td>
      </tr>
 
      <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>高老庄</td>
      </tr>
 
      <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>流沙河</td>
      </tr>
 
      <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>女儿国</td>
      </tr>
 
      <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>高老庄</td>
      </tr>
 
      <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>流沙河</td>
      </tr>
 
      <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>女儿国</td>
      </tr>
 
      <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>高老庄</td>
      </tr>
 
      <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>流沙河</td>
      </tr>
 
      <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>女儿国</td>
      </tr>
    </table>
  </body>
</html>
复制

web前端-html-表格-表格边框样式设置

1. 设置

  1. border-spacing
    • table 和 td 边框之间默认有一个距离
    • 通过 border-spacing 属性可以设置这个距离
border-spacing: 0px;
复制
  1. border-collapse
    • 可以用来设置表格的边框合并
    • 如果设置了边框合并，则 border-spacing 自动失效
border-collapse: collapse;
复制
  1. 可以使用 th 标签来表示表头中的内容，
    • 它的用法和 td 一样，不同的是它会有一些默认效果

长表格结构和补充

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>日期</th>
          <th>收入</th>
          <th>支出</th>
          <th>合计</th>
        </tr>
      </thead>
 
      <tfoot>
        <tr>
          <td></td>
          <td></td>
          <td>合计</td>
          <td>100</td>
        </tr>
      </tfoot>
 
      <tbody>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
复制

请添加图片描述

1. 说明

  1. 有一些情况下表格是非常的长的
  2. 这时就需要将表格分为三个部分，表头，表格的主体，表格的底部

2. 结构

  1. 在 HTML 中为我们提供了三个标签:
    • thead 表头 永远会显示在表格的头部
    • tbody 表格主体 永远都会显示表格的中间
    • tfoot 表格底部 永远都会显示表格的底部
  2. 这三个标签的作用，就来区分表格的不同的部分，他们都是 table 的子标签
    • 都需要直接写到 table 中,tr 需要写在这些标签当中

3. 补充

  1. 如果表格中没有写 tbody，浏览器会自动在表格中添加 tbody
    • 并且将所有的 tr 都放到 tbody 中,所以注意 tr 并不是 table 的子元素，而是 tbody 的子元素
  2. 通过 table > tr 无法选中行，需要通过 tbody > tr

表格布局(被淘汰)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <table border="1" width="100%">
      <tr height="100px">
        <td colspan="2"></td>
      </tr>
      <tr height="400px">
        <td width="20%"></td>
        <td width="80%">
          <table border="1" width="100%" height="100%">
            <tr>
              <td></td>
            </tr>
            <tr>
              <td></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr height="100px">
        <td colspan="2"></td>
      </tr>
    </table>
  </body>
</html>
复制

请添加图片描述

1. 表格布局(已经被 CSS 淘汰)

  1. 以前表格更多的情况实际是用来对页面进行布局的，但是这种方式早已经被 CSS 所淘汰了
    • 表格的列数由 td 最多的那行决定
  2. 表格是可以嵌套的，可以在 td 中再放置一个表格
转载请注明出处或者链接地址：https://www.qianduange.cn//article/1908.html
标签
web前端大作业
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

jquery输入框添加时间选择器及获取前一个月时间

2024-02-27 11:02:14

jQuery事件委托

2024-02-27 11:02:13

Django 点击文章内图片展示原始图片大小

2024-02-27 11:02:10

jQuery Date() 函数

2024-02-27 11:02:10

jQuery实现倒计时效果

2024-02-27 11:02:08

使用jQuery渲染数据的小例子

2024-02-27 11:02:08

day37_jquery

2024-02-27 11:02:07

Javascript知识【jQuery选择器】

2024-02-27 11:02:43

jquery ajax 缓存

2024-02-27 11:02:43

echarts图的数据过多设置dataZoom属性

2024-02-27 11:02:43

广告位招租：QQ85750956
大家推荐的文章
1

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
2

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
3

移动端css布局大全

2024-02-06 15:02:421000
4

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
5

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
6

成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999
7

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
8

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
9

尚硅谷css3笔记

2024-02-13 10:02:44998
10

如何利用浏览器测试跨域

2024-02-11 10:02:28998

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！