文章目录

  • 表格
    • 表格的说明(创建一个表格)
      • 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><tr><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 中再放置一个表格