精华内容
下载资源
问答
  • html 使table表格body居中

    千次阅读 2019-10-04 19:35:28
    html 使表格body居中

    原先我是这么写的

    <style>
        body {
            text-align: center
        }
      </style>
    

    body

    <span>标题</span>
    <div class="formCenter">
        <table border="1px" width="300px">
            <tr>
                <td>行1</td>
            </tr>
            <tr>
                <td>行2</td>
            </tr>
            <tr>
                <td>行3</td>
            </tr>
        </table>
    </div>
    

    得到结果:
    在这里插入图片描述问题: 一直想要用text-align属性使table标签居中,在< body align=“center”>也没有效果,span 标签倒是居中了,但这个table就是不动
    解决及总结:
    1、CSS样式里面的text-align属性只在文字排版的时候用的
    2、如果不是文字的话,在标签中用align属性可使标签内的标签及内容居中,注意必须写在标签上才有效。 align在CSS样式里面使用是无效
    3、CSS样式里面只能使用margin或padding来使标签居中

    修改代码之后:

    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .formCenter {
                background-color: aquamarine;
                width: 50%;
                margin: 0 auto;
                border: solid 1px #ff0000
            }
    
            body {
                text-align: center
            }
        </style>
    </head>
    <body>
        <span>标题</span>
        <div>
            <table class="formCenter">
                <tr>
                    <td>行1</td>
                </tr>
                <tr>
                    <td>行2</td>
                </tr>
                <tr>
                    <td>行3</td>
                </tr>
            </table>
        </div>
    </body>
    </html>
    

    结果:
    在这里插入图片描述

    展开全文
  • html中导出Excel(以table为例)

    千次阅读 2019-10-28 19:53:44
    有时候我们需要把网页的数据导出excel格式来,那么我们用下面两种方法可以完成。而且excel更直观。 第一种:自写代码 <html> <head> <meta http-equiv="content-Type" content="text/html;...

    有时候我们需要把网页中的数据导出excel格式来,那么我们用下面两种方法可以完成。而且excel更直观。

    第一种:自写代码

    <html>
    <head>
    <meta http-equiv="content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript">
        function base64 (content) {
           return window.btoa(unescape(encodeURIComponent(content)));         
        }
        /*
        *@tableId: table的Id
        *@fileName: 要生成excel文件的名字(不包括后缀,可随意填写)
        */
        function tableToExcel(tableID,fileName){
            var table = document.getElementById(tableID);
          var excelContent = table.innerHTML;
          var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
          excelFile += "<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x
    展开全文
  • HTML中table标签属性

    万次阅读 多人点赞 2019-05-17 16:49:47
    table标签用来定义表格,整个表格包含<table>和</table>标签; tr标签用来定义表格一个行,它是单元格的容器,每行可以包含有多个单元格,由<tr>和</tr>标签表示; td标签和th标签...

    表格

    表格是由行和列排列而成的一种结构

    HTML表格由table标签以及一个或多个tr、th或td标签组成:

    table标签用来定义表格,整个表格包含在<table>和</table>标签中;

    tr标签用来定义表格中一个行,它是单元格的容器,每行可以包含有多个单元格,由<tr>和</tr>标签表示;

    td标签和th标签用来定义单元格,所有单元格都在tr标签内,每个单元格由一对<td>和</td>标签或一对<th>和</th>标签表示,具体的表格内容放置在这一对td标签或th标签之中,其中th标签中的内容默认以粗体、居中的方式显示。其语法如下: 

    <table>
        <tr>
            <th>1行1列的内容</th>
            <th>1行2列的内容</th>
            …
        </tr>
        <tr>
            <td>2行1列的内容</td>
            <td>2行2列的内容</td>
            …
        </tr>
        …
    </table>
    

    <table是<tr的上层标签
    <tr必须在一个<table</table里面,它不能单独使用,相当于<table的属性标签.
    <table标示一个表格,<tr标示这个表格中间的一个行,<td、<th标示行中的一个列,需要嵌套在<tr</tr中间。

     table标签属性

    下列标签属性一般不建议使用,而是通过样式属性来实现

    1.border标签属性:设定围绕表格的边框的宽度。实际上border标签属性不仅设置围绕表格边框的宽度,还为每个单元格添加宽度为1px的边框;

    实际开发中不建议使用border标签属性实现边框效果,建议通过为table、th和td设定border样式属性实现。

    代码如下:

    2.width标签属性:设定表格的宽度,该标签属性属性值如下:

    不建议通过width标签属性设置表格宽度,建议向table标签添加width样式属性进行设置。

    代码如下:

    3.align标签属性:指定表格相对于周围标签的对齐方式,该标签属性属性值如下:

    不建议通过align标签属性设置表格相对于周围标签的对齐方式,建议向table标签添加样式属性进行设置:

             a.实现左右对齐可以通过float样式属性实现

             

              b.居中对齐可以通过margin样式属性实现:margin: 0 auto;   

    代码如下:

    4.cellspacing 标签属性:设定单元格之间的间距(单位:px)。

    不建议通过cellspacing标签属性设置单元格之间的间距,建议向table标签添加border-spacing样式属性进行设置

    代码如下:

    5.cellpadding标签属性:设定单元边沿与单元内容之间的间距(单位:px)

    不建议通过cellpadding标签属性设置单元边沿与单元内容之间的间距,建议向td或th标签添加padding样式属性来实现

    6.bgcolor标签属性:设置表格背景颜色,属性值如下:

    不建议通过bgcolor标签属性设置表格背景颜色,建议向table标签添加background-color样式属性实现这一效果

    7.border-collapse样式属性:设置表格的边框是否被合并为一个单一的边框,属性值如下:

    代码如下: 

     

       用标签属性完成一个普通表格,代码如下:

    <table border="10px" width="50%" align="center" cellspacing="0" cellpadding="5 px" bgcolor="aqua" >
    	<tr>
    		<td> 1 </td> <td> 1 </td> <td> 1 </td>				
    	</tr>
    	<tr>
    		<td> 1 </td> <td> 1 </td> <td> 1 </td>
    	</tr>
    	<tr>
    		<td> 1 </td> <td> 1 </td> <td> 1 </td>
    	</tr>
    </table>

    显示效果如下:

     

    上述代码一般不使用,通过为table、th和td设定样式属性实现,代码如下:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>	
    		<style>
    			table{				
    				border: 1px solid black;
    				width: 20%;	
    				/*float:right;*/
    				margin: 0 auto;
    				border-spacing:0 ;
    				background-color: red;
    				border-collapse: collapse;
    			}
    			td{				
    				border: 1px solid black;
    				padding: 10px;
    			}			
    		</style>
    	</head>
    	<body>        
    		<table >
    			<tr>
    				<td> 1 </td> <td> 1 </td> <td> 1 </td>				
    			</tr>
    			<tr>
    				<td> 1 </td> <td> 1 </td> <td> 1 </td>
    			</tr>
    			<tr>
    				<td> 1 </td> <td> 1 </td> <td> 1 </td>
    			</tr>
    		</table>
    	</body>
    </html>

     标签属性和样式属性都能实现基本功能,但如果同时存在,样式属性会覆盖标签属性。

     tr标签属性

    1.align标签属性:设置表格行中单元格内容的水平对齐方式,该标签属性有多个值:

    不建议通过标签属性的方式设置单元格内容的水平对齐方式,建议向tr标签添加text-align样式属性设置表格行中单元格内容的水平对齐方式

    2.valign标签属性:设置表格行中单元格内容的垂直对齐方式,该标签属性有多个值:

    不建议通过标签属性的方式设置单元格内容的垂直对齐方式,建议向tr标签添加vertical-align样式属性设置表格行中单元格内容的垂直对齐方式

    3.bgcolor标签属性:设定表格行的背景颜色,属性值如下:

    不建议通过bgcolor标签属性设置表格行的背景颜色,建议向tr标签添加background-color样式属性实现这一效果

    通过为table、th和td设定样式属性实现,代码如下:

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    	
    			table{
    				border: 1px solid black;
    				width: 20%;	
    				/*float:right;*/
    				margin: 0 auto;
    				border-spacing:0 ;
    				background-color: red;
    				border-collapse: collapse;
    			}
    			tr{
    				height: 50px;
    				text-align: center;
    				vertical-align: top;
    				background-color: salmon;				
    			}
    			td{		
    				border: 1px solid black;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<table >
    			<tr valign="top">
    				<td> 1 </td> <td> 1 </td> <td> 1 </td>			
    			</tr>
    			<tr>
    				<td> 1 </td> <td> 1 </td> <td> 1 </td>
    			</tr>
    			<tr>
    				<td> 1 </td> <td> 1 </td> <td> 1 </td>
    			</tr>
    		</table>
    	</body>
    </html>

    上述代码显示效果:

     标签属性和样式属性都能实现基本功能,但如果同时存在,样式属性会覆盖标签属性。

    th和td标签属性 

    1.width标签属性与height标签属性:设定单元格的宽度和高度,标签属性属性值如下:

    建议向th标签或td标签添加width样式属性和height样式属性设置单元格宽度和高度。

    2.bgcolor标签属性:设定单元格背景颜色,该标签属性有多个值:

    建议向th标签和td标签添加background-color样式属性设定单元格背景颜色

    3.align标签属性:设置单元格内容的水平对齐方式,该标签属性有多个值:

    建议向th标签或td标签添加text-align样式属性设置单元格内容的水平对齐方式。

    4.valign标签属性:设置单元格内容的垂直对齐方式,该标签属性有多个值:

    建议向th标签或td标签添加vertical-align样式属性设置单元格内容的垂直对齐方式。

    5.colspan样式属性:设置单元格横跨多少列。

    6.rowspan样式属性:设置单元格横跨多少行

    7.nowrap标签属性:设定单元格的内容是否换行

    如果没有nowrap标签属性,则单元格内文字自动换行!

    使用table表的知识完成如下操作:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>2013年度图书销售统计</title>
    		<style>
    			table{
    				border: 1px solid black;
    				width:50%;
    				margin: 0 auto;
    				border-spacing:0 ;
    			}
    			tr{
    				border: 1px solid black;
    				text-align: center;
    			}
    			td{
    				border: 1px solid black;
    				text-align: center;
    			}
    		</style>
    	</head>
    	<body>
    		<table>
    			<tr>
    				<td colspan="9">2013年度图书销售统计</td> 
    			</tr>
    			<tr>
    				<td rowspan="2">图书分类</td> <td colspan="2">一季度</td><td colspan="2">二季度</td><td colspan="2">三季度</td><td colspan="2">四季度</td>
    			</tr>
    			<tr>
    				  <td>销售量</td> <td>销售额</td> <td>销售量</td> <td>销售额</td> <td>销售量</td> <td>销售额</td> <td>销售量</td> <td>销售额</td>
    			</tr>
    			<tr>
    				<td>小说</td> <td>23521</td> <td>¥599,940.00</td> <td>18423</td> <td>¥44,841.00</td> <td>32125</td> <td>¥829,870.00</td><td>25100</td> <td>¥586,564.00</td>
    			</tr>
    			<tr>
    				<td>文艺</td> <td>7643</td><td>¥180,423.00</td><td>8010</td><td>¥192,420.00</td><td>10289</td><td>¥321,717.00</td><td>9012</td><td>¥266,134.00</td>
    			</tr>
    			<tr>
    				<td>励志/成功</td> <td>13328</td><td>¥428,371.00</td><td>15021</td><td>¥592,987.00</td><td>13496</td><td>¥471,620.00</td><td>10130</td><td>¥386,845.00</td>
    			</tr>
    			<tr>
    				<td>童书</td> <td>20328</td><td>¥358,891.00</td><td>24030</td><td>¥392,713.00</td><td>27444</td><td>¥461,770.00</td><td>18027</td><td>¥328,451.00</td>
    			</tr>			
    		</table>
    	</body>
    </html>

    展开全文
  • html中table的样式设置

    千次阅读 2020-07-13 14:39:42
    设置table的border属性,如下。当然样式我就不说了不建议这么干 <table border="1"></table> 之后的两种都是用css实现的,这里先说一种 //边框什么的自己写吧 table{ //主要用到的就是这个属性,这...

    因为用到了一个自定义的表格所以这里记录一下样式写法

    这里的样式基本上指的是边框了
    先说明一下设置边框的方式

    1. 设置table的border属性,如下。当然样式我就不说了不建议这么干
    <table border="1"></table>
    
    1. 之后的两种都是用css实现的,这里先说一种
    //边框什么的自己写吧
    table{
    	//主要用到的就是这个属性,这个属性可以让边框重叠,就是让两个边框加一起没那么宽了
    	//实际上并不好使,因为涉及到重叠问题,坑就不说了
    	border-collapse: collapse;
    }
    
    1. 就是想好边框怎么写,我这里分两块,一个就是每一个格子的右和下,还有整体的左和上
    // 我用的是less,其他样式请写自己的语法
    table {
      width: 700px;
      // 下面设置表格整体的边框,左上
      border-top: 1px solid #e8eaec;
      border-left: 1px solid #e8eaec;
      tr {
        width: 100%;
        height: 40px;//每一行高度
        td {
          width: 20%; // 因为我的一行分了五个,所以是20%
          // 下面设置每个格子边框,右下
          border-right: 1px solid #e8eaec;
          border-bottom: 1px solid #e8eaec;
          text-align: center;
          & * {
          /* 解释下这个是干啥
          	& 代表的就是当前选择器选中的项,也就是td
          	* 匹配所有的元素(因为我不确定表格里是放的文本还是别的元素什么,就加分通配符,其实写成 &>* 会更好
          	里面的属性是垂直居中,具体说明自己百度吧
          */
            vertical-align: middle;
          }
        }
      }
    }
    

    对了还有个很重要的东西没写

    /* 干掉可恶的边距 */
    <table cellspacing="0" cellpadding="0"></table>
    
    展开全文
  • html table 固定表头和列

    热门讨论 2015-09-21 18:20:59
    html table 固定表头和列,下载后,运行index.html页面即可看到效果。
  • HTML中Table去掉两边的边框

    万次阅读 2018-11-29 11:56:56
    HTML中Table去掉左右两边的边框 .table {  text-align: center;  }  .table table {  font-size: 14px;  border-collapse: collapse;  width: 70%;  table-layout: fixed;  text-align: center;  line...
  • 第一种:通过fieldset添加标题框 示例代码: <html> <body> <fieldset>...table width="800" border="1" > <tr> <td width="200">姓名</td> <td width...
  • html中table标签

    千次阅读 多人点赞 2019-05-17 00:32:17
    table标签1 表格2 table 标签1) border2) width3) align4) cellspacing5) cellpadding6) bgcolor7) border-collapse3 tr 标签1) align2) valign3) bgcolor4 td(th)标签1) width2) bgcolor3) align4) valign5) ...
  • 在HTML语言,表格标记使用符号<table>表示。定义表格光使用<table>是不够的,还需要定义表格的行、列、标题等内容。 标记 说明 表格标记<table> <table></table>标记...
  • 在html5不支持&lt;table&gt;的cellpadding 和 cellspacing ; 2) 如何用css实现 cellpadding, cellspacing ; 3) tr , th 是 有 border, 没有 padding 的. 1.初始: ​​​​&lt;!DOCTYP...
  • html中table导出Excel

    千次阅读 2017-09-06 14:33:15
    有时候我们需要把网页的数据导出excel格式来,那么我们用下面两种方法可以完成。第一种.自写代码<html> <meta http-equiv="content-Type" content="text/html;charset=utf-8"/> function base64 (content) {
  • 所跨的行或者列,其他行或者列也是占位的。比如:第一项项目基本信息是跨过5行,因此接下来的4行,第一列已经是默认被占了,行的td列是从第二列开始布局;最后一行,项目得分占据6列,因此第二个td实际...
  • html 表格书写table

    千次阅读 2019-09-18 17:16:54
    表格 <html> <head> <title>表格</title> <meta charset="utf-8"> ...table border="1px"> <tr> <td>(1,1)</td> ...
  • 在HTML中使用 Vue Iview组件(table page)

    千次阅读 2018-05-22 14:04:58
    在HTML中使用Vue Iview 遇到各种坑,大多都是关于作用域的留贴做个记录 &lt;div id="app"&gt; &lt;!-- html中使用i-table不是Table --&gt; &lt;i-table :columns="columns...
  • html页面中table超过高度出现滚动条

    千次阅读 2019-11-19 14:30:10
    想要实现这样的功能需要表格外面定义一个div,并且设置div高度, overflow:scroll; 比如: <div style="height:290px;width:100%;display:block;overflow-y:auto;"> <table></table> </div&...
  • HTML表格table制作

    千次阅读 多人点赞 2019-09-18 19:30:10
    显示表格边框 控制单元格的间隙 初步设置表格完成 设置宽度,字体居中 源代码 <!DOCTYPE html> <html> <head> <title>简单的表格制作</title> <...table borde...
  • html中table内容转为电子表格导出

    千次阅读 2019-04-12 19:36:05
    代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <title>导出表格内容html->.xls</title>...table id...
  • html中将table数据直接导入到excel

    千次阅读 2018-07-26 14:29:31
    //将table数据直接导入到excel var timer; function excels(table, fileName) {  if (getExplorer() == 'ie') {  var curTbl = document.getElementById(table);  var oXl = new ActiveXObject("Excel....
  • IDEA中HTML文档快速制作table表格快捷键方法

    千次阅读 多人点赞 2019-11-29 19:57:24
    今天初学HTML时想快速建立一个表格,原以为会和JAVA一样输入table后会自动提示且补全,但是却没有,反而提示了一些不需要的类: 于是自己摸索了一会,发现其实是可以自动提示的,但是需要输入的是table+ 确定...
  • html中table在android端显示

    千次阅读 2015-07-06 13:22:02
    开始都是用Html.fromHtml(source);来显示html的 但是你会发现,对于style,table等等一系列的标签它都没有解析的 ...xml加入  android:id="@+id/wv1"  android:layout_width="fill_parent
  • HTML网页中table居中和表格内容居中

    万次阅读 2017-10-23 20:26:59
    HTML网页中table居中和表格内容居中 1、html中让表格浏览器左右居中,可以设置表格的align属性 align三个属性:居中:center;靠左:left;靠右:right。 2、表格td,有两个属性控制居中显示 align...
  • html删除table中tr

    千次阅读 2016-09-28 13:52:44
    <table> <tr><td>;" onclick="delRow(this)">删除</a></td> <tr><td>;" onclick="delRow(this)">删除</a></td> </table function delRow(obj, removeRow) { var tr = this.getRowObj(obj); if (tr != null) ...
  • HTML中设置table标签行列背景颜色

    万次阅读 2019-09-23 17:18:58
    HTML中设置table标签行列背景颜色 css选择器进行设置: 使用tr:nth-child(5n)可以自己设置每隔多少行设置一种颜色。 也可以使用tr:odd{ }设置奇数行,tr:even{}设置偶数行 <style> tr:nth-child(5n){...
  • table表格的边框会重叠到一起,使用标签的border-collapse属性就可以了 <table border-collapse="collapse" > <tr><th>内容(标题)</th><th>内容(标题)</th><th>...
  • 为了让大表格(table)下载的时候可以分段的显示,就是说浏览器解析HTML时,table是作为一个整体解释的,使用TBODY可以优化显示。如果表格很长,用tbody分段,可以一部分一部分地显示,不用等整个表格都下载完成。...
  • html中表格table的内容居中显示

    万次阅读 2019-04-09 09:37:43
    html中表格table的内容居中显示
  • html web页面中table表格的使用方法和介绍

    万次阅读 多人点赞 2017-10-04 09:22:15
    html中table表格的使用 一、表格赏析  1、基金网:http://fund.eastmoney.com/dingtou/syph_yndt.html  2、NBA: http://china.nba.com/standings/  3、12306:https://kyfw.12306.cn/otn/leftTicket/init 二、创
  • HTML5中table标签与form标签的区别

    千次阅读 2018-07-19 11:15:26
    html中form表示一个表单,用来把一系列的控件包围起来,然后再统一发送这些数据到目标,比如最常见的注册,你说需要填写的资料,都是被封装form里的,填写完毕后,提交form内的内容,如果不再form内则不会提交。...
  • html5中table表格标签合并单元格

    千次阅读 2016-06-07 20:33:22
    百度经验: ...首先,我们打开DreamWeaver软件,新建一个html的页面,并以table命名进行保存。...然后我们页面的body标签内部,新建一个...接下来,我们需要每个单元格添上相应的文字,并浏览器查看效果。
  • html中table设置滚动条

    万次阅读 2018-11-04 20:08:48
    主要是给table放到一个div里去,然后再设置div显示滚动条 &lt;!--div比table大小要小才会显示--&gt; &lt;div style="overflow-x: auto; overflow-y: auto; height: 100px; width:200px;"&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,108,520
精华内容 443,408
关键字:

在html中table