- html5表格标签
- 表格
- 2019-01-09第三天
- 2015年11月5日
- 2018-11-28
- 第5单元 个性月历
- 零基础Web前端开发（5）
- html基础
- HTML基础
- 2-12. 表格标签中的其他标签
创建表格代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!-- 在HTML中，使用table标签来创建一个表格 --> <table border="1" width="40%" align="center"> <!-- 在table标签中使用tr来表示表格中的一行，有几行就有几对tr --> <tr> <!-- 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td --> <td>A1</td> <td>A2</td> <td>A3</td> <td>A4</td> </tr> <tr> <td>B1</td> <td>B2</td> <td>B3</td> <!-- rowspan用来设置纵向的合并单元格 --> <td rowspan="2">B4</td> </tr> <tr> <td>C1</td> <td>C2</td> <td>C3</td> </tr> <tr> <td>D1</td> <td>D2</td> <!-- colspan横向的合并单元格 --> <td colspan="2">D3</td> </tr> </table> </body> </html>如图：
选区_040.png
table{
设置表格的宽度
width: 300px;居中
margin: 0 auto;边框
border:1px solid black;table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离
border-spacing: 10px;border-collapse可以用来设置表格的边框合并
如果设置了边框合并，则border-spacing自动失效
border-collapse: collapse;设置背景样式
background-color: #bfa;
}
设置边框
th, td{
border: 1px solid black;
}
设置隔行变色
tbody > tr:nth-child(even){
background-color: #bfa;
}鼠标移入到tr以后，改变颜色
tr:hover{
background-color: yellow;
}效果图：
选区_041.png
长表格
有一些情况下表格是非常的长的，这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：
thead 表头(内容永远会显示在表格的头部)
tbody 表格主体(内容永远会显示在表格的中间)
tfoot 表格底部(内容永远会显示在表格的底部)tr需要写在这些标签当中
如果表格中没有写tbody，浏览器会自动在表格中添加tbody并且将所有的tr都放到tbody中。
注意tr并不是table的子元素，而是tbody的子元素
通过table > tr 无法选中行 需要通过tbody > tr表格布局
表格的列数由td最多的那行决定
表格是可以嵌套，可以在td中在放置一个表格<html lang="en"> <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>效果图：
选区_042.png
相关文章
html5表格标签
表格 格式： 表格标签： ————定义表格 ———— 定义表格标题。 ———— 定义表格的表头。 ———— ...
表格
基本表格 带边框表格 鼠标悬停表格 条纹状表格 紧缩型表格 ...
2019-01-09第三天
表格 有表格线 没有表格线？ 水平表格和垂直表格如何设计出来的？
2015年11月5日
表格标签：table 表格thead 表格头tbody 表格主体tfoot 表格尾tr 表格行th 元素定义表头t...
2018-11-28
表格 表格 长表格 表格的布局 完善clearfix 表单 模拟后台服务器 表格
第5单元 个性月历
创建表格 输入表格 调整与修必表格 美化表格
零基础Web前端开发（5）
HTML表格概述 表格的基本结构 表格的基本标签有标签 （表格）， 标签（表格行）, 标签（表格单元格）。 标签和...
html基础
HTML表格 定义表格的标签 定义表格若干行 定义表格的表头 定义表格的若干单元格 border 表格属性 合并...
HTML基础
HTML表格 定义表格的标签 定义表格若干行 定义表格的表头 定义表格的若干单元格 border 表格属性 合并...
2-12. 表格标签中的其他标签
| | 定义表格 || | 定义表格标题。 || | 定义表格的表头。 || | 定义表格的行。 ...
本文标题：表格
本文链接：https://www.haomeiwen.com/subject/cdmpgftx.html
深度阅读
- 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！
网友评论