码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift

  • web表格（详解）

    目录

    1.概述

    2.表格的基本结构

    3.表格的属性

    4.单元格合并

    1.概述

    表格的基本语法结构：

    1. <table>
    2. 	<tr>
    3. 		<td>单元格内容td>
    4. 		 ……
    5. 	tr>
    6. 	<tr>
    7. 		<td>单元格内容td>
    8. 		 ……
    9. 	tr>
    10. table>

    其中< table>用于声明一个表格对象， 用于声明一行，用于声明一个单元格。

    注意：表格中所以的标记都必须放到

    标记之间。

    例如：

    1. html>
    2. <html>
    3. <head>
    4. 	<meta charset="utf-8">
    5. 	<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 	<title>表格示例title>
    7. head>
    8. <body>
    9. 	<table width="300" border="2">
    10. 		<tr>
    11. 			<td>1td>
    12. 			<td>2td>	
    13. 			<td>3td>
    14. 		tr>
    15. 		<tr>
    16. 			<td>4td>
    17. 			<td>5td>
    18. 			<td>6td>
    19. 		tr>
    20. 	table>
    21. body>
    22. html>

    结果：

    2.表格的基本结构

    从结构上看，表格可以分成表头、主体和表尾三个部分，分别用<thead、和标记表示。

    注意：

    1.表头和表尾在一张表格中只能有一个，而一张表格可以有多个主体。

    2.对于大型表格来说，应该将出现在<tbody>的前面，这样浏览器显示数据时有利于加快表格的显示速度。

    3.、、标记内部都必须使用。
    表格结构划分的好处：

    1.可以先显示的内容，而不必等整个表格下载完成后才能显示。

    2.无论、、 的顺序如何改变，的内容总是在表格的最前面，的内容总是在表格的最后面。

    例如：

    1. html>
    2. <html>
    3. <head>
    4. 	<meta charset="utf-8">
    5. 	<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 	<title>表格基本结构title>
    7. head>
    8. <body>
    9. 	<table width="300" border="2">
    10. 		<thead>
    11. 			<tr>
    12. 				<th colspan="3" align="center">表头th>
    13. 			tr>
    14. 		thead>
    15. 		<tfoot>
    16. 			<tr>
    17. 				<td colspan="3" align="center">这是表尾td>
    18. 			tr>
    19. 		tfoot>
    20. 		<tbody>
    21. 			<tr>
    22. 				<td>1td>
    23. 				<td>2td>
    24. 				<td>3td>
    25. 			tr>
    26. 		tbody>
    27.  
    28. 	table>
    29. body>
    30. html>

    结果：

    表格相关标记的说明
    元素说明
    tr单元行，由若干单元格横向排列而成
    td单元格，包含表格数据
    th单元格标题，与td作用相似，但一般作为表头行的单元格
     table表格的最外层标记，代表一个表格
    thead表头分组
    tfoot表尾分组
    tbody表格主体分组
    colgroup列分组
    caption表格标题

    3.表格的属性

    使用

    标记可以设置表格的高度、宽度、边框线的粗细、对齐方式、背景颜色、背景图片、单元格间距和边距等表格属性。

    表格的属性及其说明
    属性说明
    align表格的对齐方式，通常是left (左对齐)、center (居中对齐)、right (右对齐
    height表格高度
    width表格宽度
    bordercolor表格边框的颜色
    bgcolor表格的背景颜色
    border表格边框
    background表格的背景图片
    cellspacing单元格之间的间距
    cellpadding单元格的内容与其边框的内边距

    例如：

    1. html>
    2. <html>
    3. <head>
    4. 	<meta charset="utf-8">
    5. 	<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 	<title>表格的属性title>
    7. head>
    8. <body>
    9. 	<table border="2" width="400" bordercolor="red" height=60px cellspacing="2" align="center" bgcolor="pink">
    10. 		<caption>表格标题caption>
    11. 		<tr>
    12. 				<th>学号th>
    13. 				<th>姓名th>
    14. 				<th>专业th>
    15. 		tr>
    16. 		<tr>
    17. 			<td>123456td>
    18. 			<td>张三td>
    19. 			<td>软件工程td>
    20. 		tr>
    21. 	table>
    22. body>
    23. html>

    结果：

    使用

    标记可以从总体上设置表格属性，根据网页布局的需要，还可以单独对表格中的某行和某一个单元格进行属性设置。在HTML文档中，标记用来生成和设置表格中一行的标记，其属性的语法格式如下:

    <tr height="行高" align="水平对齐方式" va1ign="垂直对齐方式" bgcolor="背景颜色">

    其中valign属性(取值可以为top顶端对齐、middel居中对齐、bottom底端对齐)

    例：对上面表格进行改动：在表格的第二行

    标记中，通过align属性设定表格水平方向为居中对齐:通过height属性设定表格高度为50像素;通过valign设定该行的垂直方向为顶端对齐:通过bgcolor属性设定该行的背景颜色为蓝色。

    1. html>
    2. <html>
    3. <head>
    4. 	<meta charset="utf-8">
    5. 	<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 	<title>表格的行属性title>
    7. head>
    8. <body>
    9. 	
    10. 	<table border="2" width="400px">
    11. 		<caption>学生信息caption>
    12. 		<tr>
    13. 				<th>学号th>
    14. 				<th>姓名th>
    15. 				<th>专业th>
    16. 		tr>
    17. 		<tr align="center" valign="top" height=50px bgcolor="blue">
    18. 			<td>8888td>
    19. 			<td>张三td>
    20. 			<td>软件工程td>
    21. 		tr>
    22. 	table>
    23. body>
    24. html>

    结果：

    4.单元格合并

    默认情况下，表格中每行的单元格高度和宽度都是一样的。跨行和跨列功能可以分别通过单元格的rowspan和colspan属性实现，其基本语法如下:

    <td rowspan= "所跨行数”colspan=" 所跨列数">

    注意：rowspan和colpan的属性值是一一个 具体的数值

     例如：

    1. html>
    2. <html>
    3. <head>
    4. 	<meta charset="utf-8">
    5. 	<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 	<title>合并单元格title>
    7. head>
    8. <body>
    9. 	<table border="2" width="400px">
    10. 		<tr>
    11. 			<td>1td>
    12. 			<td>1td>
    13. 			<td rowspan="2">1td>
    14. 			<td>1td>
    15. 		tr>
    16. 		<tr>
    17. 			<td>1td>
    18. 			<td>1td>
    19. 			<td>1td>
    20. 		tr>
    21. 		<tr>
    22. 			<td colspan="3">1td>
    23. 			<td>1td>
    24. 		tr>
    25. 	table>
    26. body>
    27. html>

    结果：

     

  • 相关阅读:
    PPT/PS——设置图片的背景为透明色的方法
    .Net下的分布式唯一ID
    TL072ACDR 丝印072AC SOP-8 双路JFET输入运算放大器芯片
    图的遍历之深度优先搜索和广度优先搜索
    VBA技术资料MF69：添加和删除工作表中的分页符
    Unity 动画系统基本概念
    阿里云SLB之：基于URL调度场景的SLB七层负载均衡配置（十三）
    linux驱动 usb转串口ch344 改变读取缓冲区大小
    15.项目讲解之前端页面的实现
    【Spring的自动装配】
  • 原文地址：https://blog.csdn.net/m0_52896041/article/details/128068018
    • 最新文章
    • 攻防演习之三天拿下官网站群
      数据安全治理学习——前期安全规划和安全管理体系建设
      企业安全 | 企业内一次钓鱼演练准备过程
      内网渗透测试 | Kerberos协议及其部分攻击手法
      0day的产生 | 不懂代码的"代码审计"
      安装scrcpy-client模块av模块异常，环境问题解决方案
      leetcode hot100【LeetCode 279. 完全平方数】java实现
      OpenWrt下安装Mosquitto
      AnatoMask论文汇总
      【AI日记】24.11.01 LangChain、openai api和github copilot
    • 热门文章
    • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！
      奉劝各位学弟学妹们，该打造你的技术影响力了！
      五年了，我在 CSDN 的两个一百万。
      Java俄罗斯方块，老程序员花了一个周末，连接中学年代！
      面试官都震惊，你这网络基础可以啊！
      你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法
      心情不好的时候，用 Python 画棵樱花树送给自己吧
      通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！
      13 万字 C 语言从入门到精通保姆级教程2021 年版
      10行代码集2000张美女图，Python爬虫120例，再上征途
    Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
    正则表达式工具 cron表达式工具 密码生成工具

    京公网安备 11010502049817号