• <table> 标签

    • 表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 

      • border 属性:规定表格单元拥有边框   
  • <tr> 表格行标签  
    • 用来定义表格的一行。由于HTML表格是面向行的,所以必须分别表示每一行  
    • tr 元素可以在 table,thead,tbody 和 tfoot 元素内使用  
    • tr 元素内可以包含一个或者多个 td 或 th 元素  
  • <td> 表格单元格标签
    • 用来定义表格单元格,可以同 colspan,rowspan,headers 局部属性使用

      • colspan: 左右合并单元格,该属性规定了单元格可横跨的列数,该属性的值必须是整数  
      • rowspan:上下合并单元格,该属性规定了单元格可横跨的行数,该属性的值必须是整数  
      • cellpadding:规定单元格边沿与其内容之间的空白
        • cellpadding="0"  是让单元格边框线与单元格中的内容之间的距离为0像素,即单元格中内容紧挨着单元格的边线。
      • cellspacing:规定单元格之间的空白
        • cellspacing="0"  是让各单元格之间的缝隙为0象素
      • headers:该属性的值是一个或多个单元的 ID 属性值,将单元格与列标题相关联,可用于使用屏幕阅读器  
      • width:规定表格宽度
      • height:规定表格高度
      • align:规定表格相对周围元素的对齐方式
        • left
        • center
        • right
  • <th> 标题单元格标签
    • 用来定义标题单元格,使我们有效区分数据及其描述  
    • 它同 <td> 元素具有相同的局部属性,两者有如下区别:  
      • <th> 是表示头标记,通常位于首行或者首列。而且 <th> 中的文字默认会被加粗,而 <td> 是不会的    
      • <td> 是数据标记,表示单元格的具体的数据 
  • 快速制表
    • 如下快速生成 3 行 2 列的方法
    <body>
table>tr*3>td*2 <!-- 输入完后,再按 Tab 键 -->
</body>
    <body>
<table border="1">
<tr>
<th>姓名</th>
<th>年纪</th>
<th>班级</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>一班</td>
</tr>
</table>
</body>
    <body>
<table border="1" width="200" height="20">
<tr>
<th>姓名</th>
<th>年纪</th>
<th>班级</th>
</tr>
<tr align="center">
<td>张三</td>
<td>18</td>
<td>一班</td>
</tr>
</table>
</body>
    <body>
<table border="1" width="200" height="20">
<tr>
<th>姓名</th>
<th>年纪</th>
<th>班级</th>
</tr>
<tr>
<td>张三</td>
<td></td>
<td rowspan="2"></td> <!-- 上下合并 -->
</tr>
<tr>
<td>李四</td>
<td></td>
<!-- <td></td> -->
</tr>
<tr>
<td>王五</td>
<td colspan="2"></td> <!-- 左右合并 -->
<!-- <td></td> -->
</tr>
</table>
</body>

HTML(表格标签)的更多相关文章

  1. H5 表格标签的其它标签

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. H5 表格标签基本使用

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. HTML常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  4. 9月6日表格标签(table、行、列、表头)(补)

    一.<table> <table>代表表格标签.   <table></table> 1.width  表示表格宽度,宽度表达方式有像素和百分比两种.网 ...

  5. PHP入门 - - 06-->HTML的表格标签

    表格标签<table> <table>的属性: Align: left, center, right          (表格的)位置 Border:              ...

  6. 透明、圆角、阴影效果、背景色渐变、<a></a>去外层虚线、!!!表格标签<table>

    表格标签 <table> 代表表格 width:指表格的宽度           一种是像素 (浏览器缩小的时候出现滚动条)           一种是百分比(跟着浏览器的大小而大小) b ...

  7. HTML的表格标签

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. HTML表格标签

    table标签的用途: 在表格中放图片,或用于布局(已经淘汰掉了),存放数据 table制作过程: 1.先分析表格有多少行 2.分析有多少列 3.做好表格的基本之后再添加表格需要的一些属性 table ...

  9. html系列教程--span style 及表格标签 title video

    <span> 标签:非块状元素,用于文本描述 <style> 标签:内联样式表标签定义样式信息,必须写明type类型为text/css,建议写在head中,不是必须 demo: ...

  10. HTML表格标签的使用-&lt;table&gt;

    <html> <head> <title> 表格标签 </title> <!-- 标签名:table 定义一个表格 子标签:<caption ...

随机推荐

  1. SQL——语法基础篇(上)

    用数据库的方式思考SQL是如何执行的 虽然 SQL 是声明式语言,我们可以像使用英语一样使用它,不过在 RDBMS(关系型数据库管理系统)中,SQL 的实现方式还是有差别的.今天我们就从数据库的角度来 ...

  2. string 从下标0 一直截到倒数第三位

    StringUtils.substring(String.valueOf(maxSequence), 0, -3)如上,关键就是那个-3,表示倒数第三位.

  3. web.page.regexp用法(全网唯一)

    前言 因为这个东西“web.page.regexp”,差点把自己杀了.一点都不夸张,这将近30度的天气,办公室不开空调,又要闷,还要带着口罩,躁动的很.加上这个鬼东西“web.page.regexp” ...

  4. CVE-2019-0232 远程代码执行漏洞-复现

    0x00 漏洞介绍 该漏洞是由于Tomcat CGI将命令行参数传递给Windows程序的方式存在错误,使得CGIServlet被命令注入影响. 该漏洞只影响Windows平台,要求启用了CGISer ...

  5. 003-scanf函数使用和表达式-C语言笔记

    003-scanf函数使用和表达式-C语言笔记 学习目标 1.[掌握]输入函数scanf的基本使用方法 2.[掌握]输入函数scanf运行原理和缓冲区理解 3.[掌握]算术运算符和算术表达式的使用 4 ...

  6. jdk动态代理:由浅入深理解mybatis底层

    什么是代理 代理模式,目的就是为其他对象提供一个代理以控制对某个对象的访问,代理类为被代理者处理过滤消息,说白了就是对被代理者的方法进行增强. 看到这里,有没有感觉很熟悉?AOP,我们熟知的面向切面编 ...

  7. 4. js

    1.) ~   操作符 console.log(~-2)  // 1 console.log(~-1)  // 0 console.log(~0)  // -1 console.log(~1)  // ...

  8. python3_learn 实现文件夹内批量对图片重命名

    初衷 练习Python,提高动手能力. 珍藏的壁纸文件夹名命有点乱. 可以学习下一些基础的库 开始(.jpg,无筛选) First 首先找到OS库,寻找可以遍历文件名的.找到了OS.walk() os ...

  9. 《Spring In Action》阅读笔记之装配bean

    Spring主要装配机制 1.在XML中进行显式配置 2.在Java中进行显式配置 3.隐式的的bean发现机制和自动装配 自动化装配bean Spring从两个角度来实现自动化装配 1.组件扫描:S ...

  10. 基于spring的安全管理框架-Spring Security

    什么是spring security? spring security是基于spring的安全框架.它提供全面的安全性解决方案,同时在Web请求级别和调用级别确认和授权.在Spring Framewo ...