1、常用表格标签

普通

   <table> 

         |           <tr>

         |           |          <th></th>

         |           |          <td></td>

         |            </tr>

         </table>

常用

标签 描述
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr :元素定义表格行，

th :元素定义表头,大多数浏览器会把表头显示为粗体居中的文本，

td: 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

 caption:定义表格的标题。标签必须直接放置到 <table> 标签之后。只能对每个表格定义一个标题。

所有主流浏览器都支持 <caption> 标签。默认居中可通过 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置。

  colgroup：对表格中的列进行组合，可以向整个列应用样式。只能在 <table> 元素之内， <caption> 元素之后，任意元素之前使用 。

所有主流浏览器都支持 <colgroup> 标签。如果想对 <colgroup> 中的某列定义不同的属性，请在 <colgroup> 标签内使用 <col> 标签。

<colgroup  span="2" style="background-color:red">     </colgroup>     --两列变为红色

 span  规定列组应该横跨的列数。

 col： 标签为表格中一个或多个列定义属性值。<col> 没有结束标签。只能在 table 或 colgroup 元素中使用 <col> 标签。

 <colgroup>
                                                    <col span="2" style="background-color:red">
                                                   <col style="background-color:yellow">
                                         </colgroup>

 thead：标签用于组合 HTML 表格的表头内容。作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。

元素内部必须包含一个或者多个 <tr> 标签。

tbody：用来规定表格的主体内容

 tfoot：用来规定表格的页脚部分

三者结合起来使用通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。

当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

2、属性

属性 值 描述
align
  • left
  • center
  • right

不赞成使用。请使用样式代替。

规定表格相对周围元素的对齐方式。
bgcolor
  • rgb(x,x,x)
  • #xxxxxx
  • colorname

不赞成使用。请使用样式代替。

规定表格的背景颜色。
border pixels 规定表格边框的宽度。
cellpadding
  • pixels
  • %
 规定单元边沿与其内容之间的空白。
cellspacing
  • pixels
  • %
 规定单元格之间的空白。
frame
  • void
  • above
  • below
  • hsides
  • lhs
  • rhs
  • vsides
  • box
  • border
 规定外侧边框的哪个部分是可见的。
rules
  • none
  • groups
  • rows
  • cols
  • all
 规定内侧边框的哪个部分是可见的。
summary text 规定表格的摘要。
width
  • %
  • pixels
 规定表格的宽度。

3、边框 

           border属性 规定表格边框的宽度。               

                                  <table border="1">  </table>     边框为1px

 border-collapse：   属性设置表格的边框是否被合并为一个单一的边框

如果没有指定 !DOCTYPE border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的。

collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性
inherit 规定应该从父元素继承 border-collapse 属性的值

 制作一个各边都为1px的边框 

1.                     <table border="1">  </table>          |

                             table{border-collapse:collapse}     |      -- --所有边框都为1px 的表格

2、                table    的CSS为  {  border-collapse:collapse;  border:none;  }

td         的CSS为  {  border:solid #000 1px;  }

4、关于html中table表格tr,td的高度和宽度

 1、table中的width和height设置及其作用：

table 中设置的 height 其实是设置一个最小值，

当表格中的内容或者行高总值超过这个设置值时，会自动延长表格的height值，

当表格中的内容或者行高没有达到这个值时，会自动扩大到这个值。

table 中设置的 width 值一般为表格宽度的最大值，不能改变，即使内部的内容宽度超过也不能改变。

（这个内部内容如果是图片的话是可以改变表格宽度的。）

 2、tr标签中width和height设置及其作用：

tr 标签里面的 width 设置不起任何作用。

tr 中的 height 设置和几个tr之间的设置有关。

当几个 tr 都设置了 height 的具体数值时，各个 t r的 height 按照设置的值的比例来分配总的height值，

当几个 tr 都没有设置 height 具体值时，平均分配总的height值。

当 tr 设置了具体的数值，有的没有设置具体的数值为默认时，先保证各个tr的基本需要，剩下的再满足设置了具体值的tr，之后再全部给没有设置具体值的tr。

宽度不够 tr 总的设置值的情况，要满足tr的基本需要，这里会自动延长表格的height的。然后再考虑设置了height的tr，最后考虑没有设置height的tr。

3、td标签中width和height设置及其作用：

td 的 width 是和所处的一列每个 td 的 width 都相关的，取其中最大的 width 作为这一列中每个 td 的 width，

各个 td 之间的宽度分配按照第二条中各 tr 的 height 分配规律，

各td的width不是平均分配，而是根据各自的实际内容按比例分配。

td 的 height要 看这个td所在的行的最大高度来确定这一行的每个td的height，然后各个行的高度情况和tr中的height分配原则是一样的。

4、td的height和tr的height之间的关系。

首先肯定是根据内容的需要，在这个基础上，再根据设置的值来确定，哪个设置的值大就按照哪个，

如果一个设置了值一个没有设置值，那么按照设置值的算。

5、表格内容自动换行

一 汉字换行

table-layout:fixed          //固定表格大小（不会被撑大）

        word-break:break-all;   //字符串自动换行

table-layout

所有主流浏览器都支持table-layout属性。

值 描述
automatic 默认。列宽度由单元格内容设定。
fixed

表的宽度和列的宽度固定，不随单元格中内容而改变

一.     设置了各个列的宽，没有设表的宽：表的宽度等于各个列的宽度的和

二.     设置了表的宽度，没有设各个列的宽度：各个列的宽度平均分配

三.     要是都没设置宽度：表的宽度为100％，各个列的宽度平均分配
inherit 规定应该从父元素继承 table-layout 属性的值

                                              注意： IE7和更早的版本不支持"inherit"的值。IE8需要定义！DOCTYPE。IE9支持"inherit"。

要想固定table的总的宽度和每列的宽度：

  <table  id="Table1" style="table-layout:fixed"  border="1" >

  word-break

指定非CJK脚本的断行规则 (CJK脚本是中国，日本和韩国（"中日韩"）脚本)。

值 描述
normal 使用浏览器默认的换行规则。允许在词间换行
break-all

允许在单词内换行。不管在什么位置，超过列宽时就回行

允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all

只能在半角空格或连字符处换行。

不允许 Chinese, Japanese, 和 Korean 回行

注意：
            1、(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

<table width="200" style="table-layout:fixed;">
                                <tr>
                                         <td width="25%" style="word-break : break-all; ">

abcdefghigklmnopqrstuvwxyz 1234567890

</td>

</tr>

</table>

2、（Firefox浏览器）不能解决连续的英文字符和阿拉伯数字的断行, ,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
               (Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行，

使用overflow:hidden;隐藏超出内容，这里overflow:auto;无法起作用

<table style="table-layout:fixed" width="200">

<tr>
                             <td width="25%" style="word-break : break-all; overflow:hidden; ">

abcdefghigklmnopqrstuvwxyz1234567890

</td>

</tr>

</table>

二、英文强行截断换行

可以利用css中的word-break 风格来达到我们的目的：

1、设置table中的单元格内容自动换行，为了满足浏览器兼容性，需要在table中设置table-layout:fixed。

2、word-wrap在div属性中能起到换行的作用，也可以在td中使用div,在div里面设置。

<style type="text/css">
        table{border:1px red solid;height:300px; border-collapse: collapse;}
        table tr td{border:1px red solid;}
    </style>

<table width="600px" style="table-layout:fixed;word-wrap:break-word;" >
    <tr style="">
        <td style="width:120px;">全是中文有标点</td>
        <td style="width:120px;">全是中文无标点</td>
        <td style="width:120px;">全是英文有标点</td>
        <td style="width:120px;">中文和英文</td>
        <td style="width:120px;">全是英文无标点</td>
    </tr>
    <tr >  
        <td style="width:120px;">你好这是中文。你好这是中文。你好这是中文。你好这是中文。</td>
        <td style="width:120px;">你好这是中文你好这是中文你好这是中文你好这是中文</td>
        <td style="width:120px;">This is all English. This is all English. This is all English.</td>  
        <td style="width:120px;">中英文混排的情况。Chinese and English.中英文混排的情况。Chinese and English.</td>  
        <td style="width:120px;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>  
    </tr>  
  </table>
  <br>
  <div style="word-wrap:break-word;width:200px;border:1px red solid;">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
  <br>
  <div style="word-wrap:break-word;width:200px;border:1px #00FF33 solid;">中文中文中文中文中文中文中文中文中文中文中文</div

6、合并单元格

colspan    单元格横向跨越

rowspan   单元格纵向跨越

                        <td  rowspan="3">     -- 纵向合并（跨越） 3 个 单元格

                       <td   colspan="2" >      -- 横行合并（跨越）2 个单元格 

当 表格设置了 style ="table-layout:fixed" 后，如果在第一行合并了单元格，则下面的单元格的宽度就会无法设置。

原因：table-layout: fixed 的表格，各列宽度由第一行决定，后面指定的宽度会被忽略。你第一行合并了，所以各列宽度均分了。

解决方法一：

在tbody前加

<col style="width: 60%" /> 
<col style="width: 20%" /> 
<col style="width: 20%" /> 

.........................

解决方法二：

设置一个隐藏的行来规定宽度：

<table style="table-layout:fixed;width:200px" border="1" cellspacing="1" cellpadding="1"> 
　　<tr style="display:none"> 
　　　　<td style="width:100px"></td> 
　　　　<td style="width:80px"></td> 
　　　　<td style="width:20px"></td> 
　　</tr> 
　　<tr> 
　　　　<td>1</td> 
　　　　<td colspan="2">2</td> 
　　</tr> 
　　<tr> 
　　　　<td>1.1</td> 
　　　　<td>2.1</td> 
　　　　<td>2.2</td> 
　　</tr> 
</table> 

这个方法，在IE6,IE7，IE8中都可以正确地显示，但在非IE中，是没起作用的。下面给出另外一种方法：

<table style="table-layout:fixed;width:200px" border="0" cellspacing="1" cellpadding="1"> 
　　<tr style="height:0;"> 
　　　　<th style="width:100px"></th> 
　　　　<th style="width:80px"></th> 
　　　　<th style="width:20px"></th> 
　　</tr> 
　　<tr> 
　　　　<td>1</td> 
　　　　<td colspan="2">2</td> 
　　</tr> 
　　<tr> 
　　　　<td>1.1</td> 
　　　　<td>2.1</td> 
　　　　<td>2.2</td> 
　　</tr> 
</table>

 7、打印表格每页都有的表头和打印分页

当页面太长，打印的时候，要求每页上都要有表头，结尾，

表头： 定义其thead，并对其样式设置成：style="display:table-header-group"。

结尾：定义其tfoot，并对style="display:table-footer-group"

<TABLE border="0" style="font-size:9pt;" width="300px" align="center">

<THEAD style="display:table-header-group;font-weight:bold">

<TR>

<TD >每页都有的表头 </TD>

</TR>
         </THEAD>

<TBODY style="text-align:center"">
　　　　<TR>

　　　　　　<TD>表格内容</TD>

　　　　</TR>
　　 </TBODY>

　　<TFOOT style="display:table-footer-group;font-weight:bold">
　　　　<TR>

　　　　　　<TD >每页都有的表尾</TD>

　　　　</TR>

　　</TFOOT>

</TABLE>

<input type=button value=" 打 印 " οnclick=JavaScript:window.print()>

 8、表格嵌套 

<td   style="padding:0px;height:31px;">

　　<table border="1" frame="void">
　　　　<tr>
　　　　　　<td><span>生产人员工资</span></td>
　　　　</tr>
　　</table>

</td>

frame="void"     -- 表格边框重合  ( 在边框用  border="1" 表示的情况下 )

给外侧 <td>  一个基础高度，<table> 中的高 宽都是 100%。  --边框线沾满单元格不会出现空白

属性 cellspacing  在这里不好用  ，可以设置外侧 <td> 的 样式  padding=0 去除边框线之间的空间

【表格设置】HTML中合并单元格，对列组合应用样式，适应各浏览器的内容换行相关推荐

  1. html table 合并单元格 分页,Word表格跨页，合并单元格后，希望跨页的每一页都显示合并单元格的内容（有图）...

    回答: 一.使用Excel开始菜单中的合并功能 Excel表格中合并单元格有很多中形式,比如:合并居中.合并单元格.按行合并.跨列居中.合并相同单元格和合并内容.接下来看看具体操作步骤吧! 步骤:选中 ...

  2. element 表格 评分表（合并单元格，单选框按钮选分，计算表格总分）

    文件下载 >>https://download.csdn.net/download/jemycc/12837044 突然发现 vxe 会更方便 vxe官网: https://xuliang ...

  3. Excel 中合并单元格的快捷键（ALT+H+M+M）

    要在 excel 中合并单元格,首先选择要合并到一个单元格中的单元格,然后可以使用从ALT开始的快捷键,然后同时按H+M+M. 一旦我们使用快捷键执行该函数,它将弹出一条警告消息"合并单元格 ...

  4. markdown表格在github/gitee中合并单元格

    markdown表格合并单元格只能是在.md文件中使用html   代码 github/gitee中的显示效果 横向合并 <table>   <tr>     <td&g ...

  5. html统计表合并单元格的快捷键,excel中合并单元格的快捷键的方法及设置技巧

    快捷键的熟练使用可以帮助我们在工作中提高效率,接下来为您讲解合并单元格的快捷键设置方法的图文演示 合并单元格在excel默认的情况下是没有快捷键的. 需要用以下方法设置 1.打开excel,选择工具- ...

  6. 计算机表格单元格合并,excel表格数据拆分和合并单元格-excel中如何将已经合并的单元格拆分，并将该单元格......

    Excel怎么把一个合并单元格的内容拆分为几个单元格... 要直接位置得到,则有俩种可能性 第一种,合元格是格得来的假合并单元格,单元格都有内容,直接解除合并即可 第二种,若确实是真实合并单元格,则需 ...

  7. 在合并单元格中数组公式无效_Excel中合并单元格困扰多年的难题，终于被我搞定了...

    Excel表格中如果存在合并单元格,经常会遇到一些问题,比如序号填充.数据统计或筛选等,如下图所示,需要根据指定人员姓名查找引用对应的销售部门和销售金额. 这个问题关键在于销售部门列存在合并单元格,如 ...

  8. easyExcel中合并单元格文件读取实现方案

    1.需求场景描述 2.问题分析与实现方案 1.需求场景描述 现在有个业务需要按照指定模板上传选择题,并进行入表处理,使用easyExcel进行文件上传并读取数据,其中涉及合并单元数据读取问题,这里简单 ...

  9. PHPExcel导出Excel基本操作，实现设置字体、合并单元格、加粗等功能

    PHPExcel一些相关操作,只罗列了部分功能,后续有新增再补充.代码可直接复制使用,需要注意是引入PHPExcel类库时因为是thinkphp框架,所以使用了import导入,如果其他框架,需要做部 ...

最新文章

  1. signature验证/salt验证/token验证的作用
  2. python 函数进阶_Python学习入门基础：一篇文章搞定函数基础、函数进阶
  3. mui html5电子签名,关于H5电子签名的实现。
  4. 编写高效的PyTorch代码技巧（上）
  5. 1个通用工具平台+多个热点场景工具套件，助力开发者快速构建应用
  6. Java 学习笔记(121208)
  7. Java操作Hive
  8. 【CVPR 2019】Strong-Weak Distribution Alignment for Adaptive Object Detection
  9. Qt的QDataStream
  10. 【Mac】Mac通过反向代理连接内网(教育网)服务器 + 免密登陆
  11. 众元教育H3CSE20200603班-IPsec
  12. pdf工具类 (pd4ml)
  13. 计算机强制关机后无法正常启动,win10系统强制关机后无法正常启动了如何解决...
  14. BUAA_2020级（信息大类）数据结构综合作业编程题_文本摘要生成_哈希表
  15. linux 嵌入式 快照_Linux下搭建Cortex-M嵌入式开发环境
  16. jtag的emu0与emu1_谁特么告诉你EMU就是1分钱就能赚75美元？
  17. k折交叉验证（k-fold Cross-validation）
  18. Debian11安装mysql5.7
  19. 程序员，未来你要成为CTO、技术VP还是架构师？
  20. 高分系列卫星介绍（GF）

热门文章

  1. 开源项目ruoyi-springboot-vue源码分析之LogAspect日志打印
  2. Java古典问题：有一对兔子，从出生后第3个月起每个月都生一对兔子，小兔子长到第三个月后每个月又生一对兔子，假如兔子都不死，问每个月的兔子对数为多少？
  3. 【解读】阿里巴巴 MySQL 数据库规约
  4. antd中如何实现分页勾选记住之前的选项
  5. python3 模块调用其他类的方法_python类的函数调用 python如何引用其他模块中类的方法中的变量？...
  6. matlab 2015 积分,Matlab中如何求解积分？
  7. 2012-2022：深度学习十年后是撞墙了吗？Hinton、LeCun、李飞等大佬纷纷发声
  8. hadoop fs常用命令
  9. 2022-05-30 无法验证是否已安装所需的Microsoft更新KB2919355
  10. 最好用的 6 款 Vue 实时消息提示通知(Message/Notification)组件推荐与测评