html中table表格分页

合集下载

table的分页打印

table的分页打印在⼯作中,经常有打印报表的需求,⼀般<tbody>中的<tr>⽐较多的时候,打印机打印的时候肯定会出去分页,有的客户要求⽐较⾼,⼀张A4纸⼀定要带上表头和表尾的内容(就是<thead>和<tfoot>中的内容),当然可以控制分页打印样式,把表头和表尾都加上样式,但是实际效果是不是太好,会⽐较难看,tfoot中的内容和tbody中的内容衔接不上. 后台程序是可以控制输出多少⾏tr后加上tfoot和thead,但是,页⾯显⽰的时候,⼀个页⾯会显⽰多个表头和表尾,效果不够完美,⽽且后台控制编程是⾯向过程的.所有做了⼀个前台在⽤户点击打印按钮时,调⽤函数,把整个表格拆分成多个表格(⼀个表格打印在⼀张A4纸上).从新整理下需求:1)⼀个html中的⼀个table ,打印到A4纸上2)每张纸上都要有表格的表头和表尾,内容部分的⾏数固定3)最后⼀页,内容部分的输出⾏数不够了,输出空⽩⾏.(补充下,打印的页边距是通过ScriptX控制的,这⾥就不细说了)原理就是:0)指定要输出的⾏数(每页纸要输出的tr,这⾥的tr仅属于tbody)1)获取html中的整个表格.2)获取tbody中tr的数量,根据指定的⾏数,判断是否要在末页输出空⽩⾏,3)抽取出tbody中的所有tr,缓存在变量中,清空页⾯中tbody中的tr4)获取此刻的表格,5)克隆表格,循环添加指定⾏数的tr到克隆的表格中,克隆表格后⾯跟⼀个<div>加上强制分页样式,都缓存在变量中,6)将变量插⼊⽂档,删除原有表格思路就这样,接下看代码吧,函数是封装好的,可以直接调⽤,要使⽤的话,<table>要加⼀个class代码中的class是.printTable.这个是⼀个⽐较简单的,实际⼯作中,可以能会有表格的嵌套使⽤,还要复杂很多,项⽬中我已经可以实现了,但还没封装好,有空在发布,现在就这个简单的先发上来在说了;本⼈新⼿⼊⾏刚3个⽉多⼏天,说的对的地⽅,我改!各位⼤⼤⼤请轻喷,谢了1<!DOCTYPE html>2<html>3<head lang="en">4<meta charset="UTF-8">5<title></title>6<script src="jquery-1.6.1.min.js"></script>789<script>10function printTable (ro){11var row=18; //默认分页18⾏,demo中参数是3⾏12if(ro != undefined){13 row=ro;14 }15var $tbl = $('table.printTable');16var $tableparent=$tbl.parent();17var $thead = $tbl.find('thead');18// var $tfoot = $tbl.find('tfoot');19var $tbody = $tbl.find('tbody');20var $tbodyTr = $tbody.children();21var $clonefirstTr= $tbodyTr.first().clone();22 $clonefirstTr.children().each(function(){23 $(this).html(' ');24 })25//打空⽩⾏26var tbodyTrlength = $tbodyTr.length;27var addrow = 0;28var remainder =tbodyTrlength%row;29var nulltr="";30if( remainder!=0){31 addrow = row- remainder;32for(var i = 0;i<addrow;i++){33 nulltr+=$clonefirstTr[0].outerHTML;34 }35 }36 $tbody.append(nulltr); //空⽩⾏加⼊到⽂档37//再⼀次获取所有的tr⾏38 $tbodyTr=$tbody.children();39//清空tbody40 $tbody.children().remove();41//再获取整个表格(此时的表格tbody已经没东西了,这样解释是不是有点啰嗦了?)42 $tbl = $('table.printTable');43//创建⼀个⽂档碎⽚(这⾥没有⽤⽂档碎⽚了,jQuery操作字符串更简单)44var fragment='';45//给表格加18⾏tr(主体内容)46 tbodyTrlength = $tbodyTr.length;47var trFG= '';48for(var i =0 ; i<tbodyTrlength; i++){49 trFG+=$tbodyTr.eq(i)[0].outerHTML;50if((i+1)%row==0){51var clonetbl = $tbl.clone(); //克隆⼀个表格52 clonetbl.find("tbody").append(trFG);//在表格的body中加⼊内容53 fragment+=clonetbl[0].outerHTML+"<div style='page-break-after:always;' ><br/></div>"; //把表格加⼊⽂档碎⽚中54 trFG='';55 }56 }57 $tbl.before(fragment);58 $tbl.remove();59 }6061</script>62</head>63<body>64<button onclick="printTable(3)">调⽤函数按钮</button>6566<table class="printTable" border="1">67<thead>68<tr>69<td>头</td>70<td>头</td>71</tr>72</thead>7374<tbody>75<tr>76<td>body</td>77<td>body</td>78</tr><tr>79<td>body</td>80<td>body</td>81</tr><tr>82<td>body</td>83<td>body</td>84</tr><tr>85<td>body</td>86<td>body</td>87</tr><tr>88<td>body</td>89<td>body</td>90</tr><tr>91<td>body</td>92<td>body</td>93</tr><tr>94<td>body</td>95<td>body</td>96</tr><tr>97<td>body</td>98<td>body</td>99</tr><tr>100<td>body</td>101<td>body</td>102</tr><tr>103<td>body</td>104<td>body</td>105</tr><tr>106<td>body</td>107<td>body</td>108</tr><tr>109<td>body</td>110<td>body</td>111</tr><tr>112<td>body</td>113<td>body</td>114</tr><tr>115<td>body</td>116<td>body</td>117</tr>118</tbody>119120<tfoot>121<tr>122<td>tfoot</td> 123<td>tfoot</td> 124</tr>125</tfoot>126</table>127128</body>129</html>。

jquery打印html表格自动分页

竭诚为您提供优质文档/双击可除jquery打印html表格自动分页篇一：html表格及分页html表格及分页1.htmltransitional//en""/tR/xhtml1/dtd/x html1-transitional.dtd">系统事件操作进行中,请耐心等待...■系统事件--%>事件类型:所有事件--%>系统事件操作日志事件事件描述:时间范围:～"onclick="queryclick()"class="mbtn"/> "onclick="exoprtascsv(histevent)"class="mbtn"/>时间事件类型事件描述总共0条第/0页"onclick="pagerjump()"class="pagerctrl"id="jumpbtn" />"onclick="pagerfirst()"class="pagerctrl"id="firstbt n"/>"onclick="pagerperv()"class="pagerctrl"id="prevbtn" />"onclick="pagernext()"class="pagerctrl"id="nextbtn" />"onclick="pagerlast()"class="pagerctrl"id="lastbtn"/>$(".timepicker").datetimepicker().attr("readonly"," readonly");$(".pagerctrl").attr("disabled","disable d");$("#waiting").hide();daystring();2..histeventpage.js///vareventtype="";vardescription="";varstarttime="";varendtime="";//查询按钮,查询分页信息并查出第一页内容functionqueryclick(){//获取查询条件eventtype=$("#eventtype").val();description=$("#description").val();篇二：使用php和jquery制作分页和表格使用php和jquery制作分页和表格如果您已经下载了本站提供的baseproject项目源码，后台中列表页面均可作为示例，其中文章列表页面的功能最为丰富。

html里table的用法

html里table的用法HTML中的表格是一种常用的布局工具，它可以用于展示数据、组织信息、展示布局等。

在HTML中，可以使用`<table>`标签来创建表格，并使用其他的HTML 标签来控制表格的外观和行为。

下面我们将介绍如何使用`<table>`标签创建表格、设置表格属性、添加表头和表体、以及控制表格的行为等。

一、创建表格要创建一个表格，可以使用`<table>`标签来包围表格内容。

表格通常由行和列组成，每一行称为一个“行”，每一列称为一个“列”。

可以使用`<tr>`标签来创建行，使用`<td>`或`<th>`标签来创建列。

例如，以下是一个简单的表格示例：```html<table><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr></table>```上述代码创建了一个包含三列的表格，其中第一列是表头，第二和第三列是表格的行内容。

二、设置表格属性除了使用`<table>`标签外，还可以使用其他的HTML标签来设置表格的属性，例如边框宽度、单元格边距、单元格间距等。

可以使用`border`属性来设置表格的边框宽度，使用`cellpadding`和`cellspacing`属性来控制单元格的内边距和单元格之间的间距。

JS代码实现table数据分页效果

JS代码实现table数据分页效果第⼀个：实现的很常见很简单的显⽰页数翻页效果图：•这是HTML代码，很简单滴（我好像看到了被嫌弃的⼩眼神）<!DOCTYPE html><html><head lang="en"><meta charset="UTF-"><script src="js/jquery-...js"></script><script src="js/demo.js"></script><link rel="stylesheet" href="js/demo.css"/><title></title></head><body><table width="" border=""><thead><tr><th>姓名</th><th>性别</th><th>编号</th><th>年龄</th></tr></thead><tbody><tr><td>张三</td><td>男</td><td></td><td></td></tr><tr><td>tom</td><td>男</td><td></td><td></td></tr><tr><td>李四</td><td>男</td><td></td><td></td></tr><tr><td>⼆蛋</td><td>男</td><td></td><td></td></tr><tr><td>⼆丫</td><td>⼥</td><td></td><td></td></tr></tbody></table></body></html>•下⾯就是JS代码了$(function(){var $table=$('table');//获取表格对象var currentPage=;//设置当前页默认值为var pageSize=;//设置每⼀页要显⽰的数⽬$table.bind('paging', function () {$table.find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+)*pageSize).show();//先将tbody中所有的⾏隐藏，再通过slice结合当前页数和页⾯显⽰的数⽬展现数据});var sumRows=$table.find('tbody tr').length;//获取数据总⾏数var sumPages=Math.ceil(sumRows/pageSize);//得到总页数var $pager=$('<div class="page"></div>');for(var pageIndex=;pageIndex<sumPages;pageIndex++){$('<a href="#"><span>'+(pageIndex+)+'</span></a>').bind("click",{"newPage":pageIndex},function(event){ currentPage=event.data["newPage"];$table.trigger("paging");//为每⼀个要显⽰的页数上添加触发分页函数}).appendTo($pager);$pager.append(" ");}$pager.insertAfter($table);$table.trigger("paging");});第⼆个：实现前进页和后退页效果图：•这是全部代码，⽤得原⽣JS，依然还是很简单滴（好像对原⽣js有种莫名的喜爱，有⽊有）<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-" /><title>table分页</title></head><body><style type="text/css">.tablebox{border:solid px #ddd;}.tablebox td{text-align:center;border:solid px #ddd;padding:px;}</style><div style="width:px;margin: auto;"><table class="tablebox" width="" border="" cellpadding="" cellspacing=""><tbody id="table"><tr><td></td><td> </td><td> </td><td> </td><td> </td></tr><tr><td></td><td> </td><td> </td><td> </td><td> </td></tr><tr><td></td><td> </td><td> </td><td> </td><td> </td> </tr><tr><td></td><td> </td> <td> </td> <td> </td> <td> </td> </tr><tr><td></td><td> </td> <td> </td> <td> </td> <td> </td> </tr><tr><td></td><td> </td> <td> </td> <td> </td> <td> </td> </tr><tr><td></td><td> </td> <td> </td> <td> </td> <td> </td> </tr><tr><td></td><td> </td> <td> </td> <td> </td> <td> </td> </tr><tr><td></td><td> </td> <td> </td> <td> </td> <td> </td> </tr><tr><td></td><td> </td> <td> </td> <td> </td> <td> </td> </tr><tr><td></td><td> </td> <td> </td> <td> </td> <td> </td> </tr><tr><td></td><td> </td> <td> </td> <td> </td> <td> </td> </tr><tr><td></td><td> </td> <td> </td> <td> </td> <td> </td> </tr><tr><td></td><td> </td> <td> </td> <td> </td> <td> </td><td> </td><td> </td><td> </td><td> </td></tr></tbody></table><div style="height:px;margin:px ;"><span id="spanFirst">第⼀页</span><span id="spanPre">上⼀页</span><span id="spanNext">下⼀页</span><span id="spanLast">最后⼀页</span>第<span id="spanPageNum"></span>页/共<span id="spanTotalPage"></span>页</div></div><script type="text/javascript">var theTable = document.getElementById("table");var totalPage = document.getElementById("spanTotalPage"); var pageNum = document.getElementById("spanPageNum"); var spanPre = document.getElementById("spanPre");var spanNext = document.getElementById("spanNext");var spanFirst = document.getElementById("spanFirst");var spanLast = document.getElementById("spanLast");var numberRowsInTable = theTable.rows.length;var pageSize = ;var page = ;//下⼀页function next() {hideTable();currentRow = pageSize * page;maxRow = currentRow + pageSize;if ( maxRow > numberRowsInTable )maxRow = numberRowsInTable;for ( var i = currentRow; i< maxRow; i++ ) {theTable.rows[i].style.display = '';}page++;if ( maxRow == numberRowsInTable ){nextText();lastText();}showPage();preLink();firstLink();}//上⼀页function pre() {hideTable();page--;currentRow = pageSize * page;maxRow = currentRow - pageSize;if ( currentRow > numberRowsInTable )currentRow = numberRowsInTable;for ( var i = maxRow; i< currentRow; i++ ) {theTable.rows[i].style.display = '';}if ( maxRow == ) {preText();firstText();}showPage();nextLink();lastLink();}//第⼀页function first() {hideTable();page = ;for ( var i = ; i<pageSize; i++ ) {theTable.rows[i].style.display = '';}showPage();preText();}//最后⼀页function last() {hideTable();page = pageCount();currentRow = pageSize * (page - );for ( var i = currentRow; i<numberRowsInTable; i++ ) {theTable.rows[i].style.display = '';}showPage();preLink();nextText();firstLink();}function hideTable() {for ( var i = ; i<numberRowsInTable; i++ ) {theTable.rows[i].style.display = 'none';}}function showPage() {pageNum.innerHTML = page;}//总共页数function pageCount() {var count = ;if ( numberRowsInTable%pageSize != ) count = ;return parseInt(numberRowsInTable/pageSize) + count;}//显⽰链接function preLink() { spanPre.innerHTML = "<a href='javascript:pre();'>上⼀页</a>"; }function preText() { spanPre.innerHTML = "上⼀页"; }function nextLink() { spanNext.innerHTML = "<a href='javascript:next();'>下⼀页</a>"; }function nextText() { spanNext.innerHTML = "下⼀页"; }function firstLink() { spanFirst.innerHTML = "<a href='javascript:first();'>第⼀页</a>"; }function firstText() { spanFirst.innerHTML = "第⼀页"; }function lastLink() { spanLast.innerHTML = "<a href='javascript:last();'>最后⼀页</a>"; }function lastText() { spanLast.innerHTML = "最后⼀页"; }//隐藏表格function hide() {for ( var i = pageSize; i<numberRowsInTable; i++ ) {theTable.rows[i].style.display = 'none';}totalPage.innerHTML = pageCount();pageNum.innerHTML = '';nextLink();lastLink();}hide();</script></body></html>以上内容是⼩编给⼤家介绍的JS代码实现table数据分页效果，希望对⼤家有所帮助，如果⼤家还有任何问题欢迎给我留⾔，⼩编会及时回复⼤家的，在此也⾮常感谢⼤家对⽹站的⽀持！。

table在html中的作用

table在html中的作用
在HTML中，table（表格）是一种用于展示和组织数据的标记
元素。

它可以将数据以行和列的形式进行排列，使得数据更易于理
解和比较。

表格在网页设计中有着广泛的应用，它可以用于各种场景，例如：
1. 数据展示，表格可以用来展示各种类型的数据，如统计数据、产品价格、学生成绩等。

通过表格的排列和对齐，用户可以更直观
地浏览和比较数据。

2. 布局和结构，表格可以用于网页的布局和结构化，将页面内
容划分为不同的区域。

通过设置表格的行和列，可以实现复杂的页
面布局，如导航菜单、网格布局等。

3. 表单设计，表格在HTML中也被广泛用于表单设计。

表格可
以用来创建用户输入数据的表单，如注册表单、调查问卷等。

通过
表格的行和列，可以将表单元素（如输入框、复选框、下拉菜单等）进行组织和排列，使用户更方便地填写表单。

4. 数据分析和报告，表格在数据分析和报告中起着关键的作用。

通过表格的排序、筛选和汇总功能，可以对大量数据进行分析和统计，生成可视化的报告和图表。

在HTML中，使用`<table>`元素来创建表格。

表格由`<table>`、`<tr>`（表格行）和`<td>`（表格数据）等标签组成。

`<th>`（表头）标签用于定义表格的列标题。

总结起来，HTML中的table元素可以用于展示数据、布局和结构、表单设计以及数据分析和报告等多个方面。

它是网页设计中不
可或缺的元素之一。

html表格的结构

html表格的结构HTML表格是网页中常用的一种数据展示方式，通过合理的结构可以清晰地展示数据，并提高页面的可读性和美观性。

本文将介绍HTML表格的结构及相关标签的使用方法。

一、基本结构HTML表格由<table>标签包裹，并包含多个相关的标签来定义表格的各个部分，如表头、表体和表尾等。

1. <table>标签：定义一个表格。

2. <caption>标签：定义表格的标题，位于表格上方。

3. <thead>标签：定义表格的表头部分。

4. <tbody>标签：定义表格的表体部分。

5. <tfoot>标签：定义表格的表尾部分。

二、表头部分表头部分通常用于显示表格的列名，使用<th>标签来定义每一列的表头。

示例代码：```<table><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead></table>```三、表体部分表体部分用于展示数据，使用<tr>标签定义每一行，使用<td>标签定义每一列的内容。

示例代码：```<table><thead><tr><th>姓名</th><th>年龄</th><th>性别</th> </tr></thead><tbody><tr><td>张三</td> <td>25</td> <td>男</td> </tr><tr><td>李四</td> <td>30</td> <td>女</td> </tr></tbody></table>```四、表尾部分表尾部分通常用于显示一些总结性的信息或其他附加内容，如合计数据等。

layuitable分页记住之前勾选的数据

layuitable分页记住之前勾选的数据<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>添加商品</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="format-detection" content="telephone=no"><link rel="stylesheet" type="text/css" href="../common/layui/css/layui.css" media="all"><link rel="stylesheet" type="text/css" href="../common/bootstrap/css/bootstrap.css" media="all"><link rel="stylesheet" type="text/css" href="../common/font/iconfont.css" media="all"><link rel="stylesheet" type="text/css" href="../css/pages.css" media="all"><style type="text/css">.clear {clear: both;height: 0;line-height: 0;font-size: 0;overflow: hidden;}.top_title {margin-bottom: 20px;line-height: 45px;font-size: 20px;font-weight: 600;color: #33A7FD;border-bottom: 1px solid #eee;}.layui-input-block .form_text {padding: 0;margin: 0;line-height: 1.8em;font-size: 14px;color: #999;}yui-form-label {width: 145px !important;font-size: 18px !important;padding: 8px;}.layui-input-block {margin-left: 145px;font-size: 18px;}.vis_hid {visibility: hidden;}.layui-tab-item {padding: 20px 20px 20px 10px;background-color: #F7F7F7;}.layui-input {font-size: 16px;}.layui-input:hover {border-color: #33A7FD;}yui-input[disabled="disabled"],.input_disabled {border: 0 !important;background: #eeeeee !important;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none !important;margin: 0;}input[type="number"] {-moz-appearance: textfield;}@media only screen and (max-width:1600px) {#form_data {width: 100%;}}/* 商品头部选项卡切换 */.pro_top_tab {position: relative;left: 0;height: 40px;margin-top: 0;margin-bottom: 10px;border-bottom: 1px solid #e6e6e6;white-space: nowrap;font-size: 0;transition: all .2s;-webkit-transition: all .2s;}.pro_top_tab li {display: inline-block;*display: inline;*zoom: 1;vertical-align: middle;font-size: 14px;min-width: 65px;padding: 0 15px;text-align: center;cursor: pointer;}.pro_top_tab li a {display: block}.pro_top_tab .tab_this {color: #1E9FFF;font-weight: 600;border-color: #1E9FFF;}.pro_top_tab .tab_this:after {position: absolute;left: 0;top: 0;content: '';width: 100%;height: 41px;border-bottom: 2px solid #1E9FFF;border-radius: 2px 2px 00;box-sizing: border-box;pointer-events: none}/* 商品名称 */.pro_add_unit {}.pro_add_unit>.layui-input {width: 65%;}.pro_add_unit .unit_box {width: 25%;min-width: 180px;height: 38px;position: absolute;right: 0px;top: 0px;}/* 选择商品分类 */.choose_box {position: relative;}.choose_box .choose_inline {min-width: 80px;height: 38px;position: absolute;right: -2px;top: 0px;}.choose_box .choose_inline .choose_button { display: inline-block;height: 38px;line-height: 38px;padding: 0 18px;margin: 0;background-color: #33A7FD;color: #fff;white-space: nowrap;text-align: center;font-size: 14px;border: none;border-radius: 3px;cursor: pointer;}/* 商品价格 */.pro_price {height: 41px;border: 1px solid #e6e6e6;border-radius: 3px;}.pro_price {}.pro_price .layui-input {width: 100%;float: left;border: 0;color: #888;text-indent: 1em;}.pro_price .pro_price_unit {float: left;display: inline-block;width: 16.6%;line-height: 38px;margin: 0;background-color: #f9f9f9;border: 1px solid #e6e6e6;border-radius: 3px;text-align: center;font-size: 14px;}/* 商品图⽚ */.banner_file {position: relative;}.banner_file .banner_inline {min-width: 80px;height: 38px;position: absolute;right: -2px;top: 0px;}.banner_file .banner_inline .button_tb {display: inline-block;background-color: #33A7FD;color: #fff;white-space: nowrap;text-align: center;font-size: 14px;border: none;cursor: pointer;}#file_img_list {overflow: hidden;}#file_img_list .file_img {float: left;margin-right: 45px;}.banner_file .file_img {width: 274px;height: 150px;border: 1px solid #ccc;margin-right: 30px;margin-top: 20px;background: #FFFFFF url(../images/file_img.png) no-repeat center; position: relative;text-align: center;}.banner_file .file_img img,.banner_file .file_img video {max-width: 100%;height: 100%;}.banner_file .file_img .file_exit {padding: 0;margin: 0;width: 30px;height: 30px;line-height: 30px;text-align: center;font-size: 24px;position: absolute;top: -1px;right: -30px;cursor: pointer;border: 1px solid #ccc;}.banner_file .file_img_tishi {height: 40px;line-height: 40px;font-size: 14px;color: #999;}#file_video {width: 366px;height: 200px;}/* 商品销量 */.pro_sales {position: relative;}.pro_sales .layui-input {width: 50%;float: left;color: #888;text-indent: 0.3em;}.pro_sales .pro_sales_unit {float: left;display: inline-block;width: 50px;line-height: 38px;margin: 000 30px;background-color: #fafafa;border: 1px solid #e6e6e6;border-radius: 3px;text-align: center;font-size: 14px;}/* 商品状态选择 / 商品标签选择 */.ifon_checkbox_choose {display: inline-block;vertical-align: middle;position: relative;height: 30px;line-height: 30px;margin-right: 10px;margin-top: 4px;padding-right: 30px;cursor: pointer;background-color: #fff;font-size: 0;-webkit-transition: .1s linear;transition: .1s linear;box-sizing: border-box;}.ifon_checkbox_choose span {display: inline-block;vertical-align: middle;padding: 0 10px;height: 100%;border-radius: 2px 00 2px;background-color: #d2d2d2;color: #fff;overflow: hidden;font-size: 14px;text-overflow: ellipsis;white-space: nowrap;}top: 0;width: 30px;height: 30px;border: 1px solid #d2d2d2;border-left: none;border-radius: 0 2px 2px 0;color: #fff;font-size: 20px;text-align: center;}.ifon_checkbox_choose:hover i {border-color: #c2c2c2;color: #c2c2c2;}.ifon_checkbox_choose:hover span {background-color: #c2c2c2;}.ifon_checked span,.ifon_checked:hover span {background-color: #1E9FFF;}.ifon_checked i,.ifon_checked:hover i {color: #1E9FFF;border-color: #1E9FFF;}/* 重量 */.pro_weight_box {position: relative;}.pro_weight_box .pro_weight {width: 50px;height: 36px;line-height: 36px;background-color: #fafafa;border: 1px solid #e6e6e6;text-align: center;font-size: 14px;position: absolute;right: 1px;top: 1px;}/* 添加规格 *//* 是否启⽤添加规格和是否启⽤优惠券 */ .guige_box,.state_box {}.guige_box .guige_checked,.state_box .state_checked {display: inline-block;margin-top: 4px;padding-left: 26px;position: relative;height: 30px;line-height: 30px;cursor: pointer;-webkit-transition: .1s linear;transition: .1s linear;box-sizing: border-box;}.guige_box .guige_checked span,.state_box .state_checked span {display: inline-block;padding: 0 10px;height: 100%;font-size: 18px;border-radius: 3px;color: #999;overflow: hidden;}.guige_box .guige_checked i,.state_box .state_checked i {position: absolute;left: 0;top: 0;width: 25px;height: 25px;line-height: 25px;margin-top: 2px;border: 1px solid #d2d2d2;border-radius: 3px;color: #fff;font-size: 18px;text-align: center;}.guige_box .guige_click span,.state_box .state_click span {font-weight: 500;color: #1E9FFF;}.guige_box .guige_click i,.state_box .state_click i {border-color: #1E9FFF;color: #1E9FFF;}#guige_div {display: none;}.pro_guige {}.pro_guige .guige_text {border: 1px solid #ccc;padding: 8px;margin: 10px 0;position: absolute;right: 8px;top: 8px;}.pro_guige .guige_inline .button_tb {float: right;display: inline-block;height: 38px;line-height: 38px;padding: 0 18px;margin: 0;background-color: #33A7FD;color: #fff;white-space: nowrap;text-align: center;font-size: 14px;border: none;cursor: pointer;}.pro_guige .guige_inline .guige_exit {float: right;padding: 0;margin: 0;width: 38px;height: 38px;line-height: 38px;background-color: #EB6160;color: #fff;text-align: center;font-size: 24px;cursor: pointer;}.pro_guige .guige_list {margin: 15px;}.pro_guige .guige_list li {display: inline-block;width: 295px;height: 38px;line-height: 38px;border: 1px solid #e6e6e6;background-color: #fff;border-radius: 3px;margin: 10px;}.pro_guige .guige_list li input {float: left;width: 180px;height: 36px;padding-left: 10px;border: 0;}.pro_guige .guige_list li .input_guige_checkbox { float: left;width: 38px;height: 100%;border-right: 1px solid #e6e6e6;text-align: center;}.pro_guige .guige_list li .input_guige_checkbox i { font-size: 16px;border: 1px solid #e6e6e6;}.pro_guige .guige_list li .input_guige_click i {color: #fff;border-color: #33A7FD;background-color: #33A7FD;}.pro_guige .guige_list li .input_guige_exit,.pro_guige .guige_list li .input_guige_mobile { float: right;padding: 0;margin: 0;width: 35px;height: 100%;border-left: 1px solid #e6e6e6;text-align: center;cursor: pointer;-moz-user-select: none;/*⽕狐*/-webkit-user-select: none;/*webkit浏览器*/-ms-user-select: none;/*IE10*/-khtml-user-select: none;/*早期浏览器*/user-select: none;}.pro_guige .guige_list li .input_guige_exit {font-size: 26px;}.pro_guige .guige_list li .input_guige_mobile {} /* 参数 */#pro_canshu_list {position: relative;}.pro_canshu {font-size: 16px;height: 38px;line-height: 38px;margin-bottom: 18px;position: relative;}}.pro_canshu .canshu_left input {width: 100%;}.pro_canshu .canshu_right {}.pro_canshu .canshu_exit,.pro_canshu .canshu_mobile {float: left;margin-left: 60px;text-align: center;cursor: pointer;-moz-user-select: none;/*⽕狐*/-webkit-user-select: none;/*webkit浏览器*/-ms-user-select: none;/*IE10*/-khtml-user-select: none;/*早期浏览器*/user-select: none;}.pro_canshu .canshu_exit {width: 38px;height: 38px;border: 2px solid #dedede;font-size: 24px;}.pro_canshu .canshu_mobile {display: inline-block;padding: 0px 15px;border: 1px solid #dedede;font-size: 14px;}.pro_canshu input {width: 50%;height: 38px;float: left;}.pro_buttom {display: inline-block;height: 38px;line-height: 38px;padding: 0 18px;margin: 0 3px;background-color: #33A7FD;color: #fff;white-space: nowrap;text-align: center;font-size: 14px;border: none;border-radius: 5px;cursor: pointer;outline: 0;-webkit-appearance: none;transition: all .3s;-webkit-transition: all .3s;box-sizing: border-box;}.pro_buttom:hover {opacity: 0.8;filter: alpha(opacity=80);color: #fff;}.pro_time {width: 350px;font-size: 15px;}/* 优惠额度 *//* .pro_preferential {padding:0 50px 0 65px; width:350px; height:40px; border:1px solid #e6e6e6; border-radius:3px; position: relative; }.pro_preferential .layui-input{ border:0; color:#888; }.pro_preferential .preferential_box ,.pro_preferential .pro_weight{ height: 38px; line-height:38px; background-color:#fafafa; border:1px solid #e6e6e6; text-align: center; font-size: 14px; position:absolute; top:0px; } .pro_preferential .preferential_box{width:65px; left:0px; }.pro_preferential .pro_weight{width:50px; right:0px; } *//* 获取积分 */.pro_jifen {}.pro_jifen dd {float: left;width: 180px;height: 38px;line-height: 38px;margin-right: 30px;font-size: 16px;}.pro_jifen dd .canshu_exit,.pro_jifen dd .hy_canshu_exit {width: 38px;height: 38px;margin: 0;border: 5px;border: 1px solid #dedede;line-height: 38px;text-align: center;font-size: 24px;cursor: pointer;}.form_select {position: relative;}.form_select_title .layui-input {padding-right: 30px;cursor: pointer;top: 50%;margin-top: -3px;cursor: pointer;border-width: 6px;border-top-color: #c2c2c2;border-top-style: solid;transition: all .3s;-webkit-transition: all .3s;}.form_select_click .layui-edge {margin-top: -9px\0/IE9;margin-top: -9px;-webkit-transform: rotate(180deg);transform: rotate(180deg);margin-top: -3px\9;}.form_select_upbit {display: none;position: absolute;left: 0;top: 42px;z-index: 899;padding: 5px 0;min-width: 100%;max-height: 300px;border: 1px solid #d2d2d2;overflow-y: auto;background-color: #fff;border-radius: 2px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12); box-sizing: border-box;-webkit-animation-name: layui-upbit;animation-name: layui-upbit;-webkit-animation-duration: .3s;animation-duration: .3s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}.form_select_upbit li {cursor: pointer;padding: 0 10px;line-height: 36px;font-size: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.form_select_upbit li:hover {background-color: #f2f2f2;-webkit-transition: .5s all;transition: .5s all;}.form_select_upbit .select_tips {color: #999;}.form_select_upbit .select_this,.form_select_upbit .select_this:hover {background-color: #1E9FFF;color: #fff;}.jifen_box {/* overflow: hidden; */}.pro_jifen_box {margin-bottom: 20px;}.pro_jifen_box .jifen_box_title {float: left;display: block;width: 245px;padding: 8px;line-height: 20px;font-size: 18px;font-weight: 400;text-align: right;}.pro_jifen_box .jifen_box_form {float: left;display: block;margin-left: 10px;}/* 弹窗样式 */#details_layer {z-index: 888;width: 100%;min-width: 500px;position: fixed;top: 0;left: 0;visibility: hidden;background-color: rgba(0, 0, 0, 0.2);}#details_layer .details_export {box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;z-index: 889;width: 60%;min-height: 360px;overflow: auto;position: absolute;top: 40%;left: 50%;margin: -180px 00 -30%;padding: 20px 20px 85px 20px;background-color: #fff;padding-left: 10px;border-left: 4px solid #33A7FD;font-size: 18px;}#details_layer .layer_top span {padding: 0px 8px;color: #33A7FD;}#details_layer .tc_button {width: 100%;height: 70px;padding-top: 15px;text-align: center;font-size: 16px;background-color: #fff;position: absolute;left: 0;bottom: 0px;}#details_layer .tc_button button {display: inline-block;width: 100px;height: 40px;line-height: 40px;text-align: center;border-radius: 5px;border: 0;}#details_layer #tc_determine {background-color: #33A7FD;color: #fff;margin-right: 10%;}#details_layer #tc_cancel {}.details_box {height: 246px;overflow-x: hidden;overflow-y: scroll;}/* 列表数据样式 */.data_list {padding-top: 25px;}#data_list_info {}#data_list_info span {display: inline-block;min-width: 120px;height: 45px;padding: 0 5px;margin: 0 8px 10px;border-radius: 5px;border: 1px solid #C1C1C1;text-align: center;line-height: 45px;font-size: 16px;cursor: pointer;}</style><style type="text/css">table {margin-left: 140px;width: 90%;border-collapse: collapse;/*margin: 0 auto;*/text-align: center;}table td,table th {text-align: center;border: 1px solid #cad9ea;color: #666;height: 30px;}table thead th {background-color: #CCE8EB;width: 100px;}table tr:nth-child(odd) {background: #fff;}table tr:nth-child(even) {background: #F5FAFA;}</style><script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script><script type="text/javascript" src="../js/jquery.cookie.js"></script> <script type="text/javascript" src="./drag_sorting/drag-arrange.js"></script><li class="tab_this">基本</li><li>库存/规格</li><li>参数</li><li>详情</li><li>购买权限</li></ul><form class="layui-form col-xs-9" id="form_data" enctype="multipart/form-data"><div class="layui-tab-content"><div class="layui-tab-item layui-show"><div class="layui-form-item"><label class="layui-form-label">排序：</label><div class="layui-input-block"><input type="number" maxlength="5" name="sqe" autocomplete="off"lay-verify="required|number"class="layui-input sqe" placeholder="排序号"><p class="form_text"> 数字越⼤，排名越靠前；如果为空，默认排序⽅式为创建时间。

web前端中table的各种用法

Web前端中，表格（table）是一种常用的HTML元素，用于展示和组织数据。

在实际开发过程中，表格的使用非常普遍，可以用于展示各种数据，比如排行榜、商品列表、数据报表等等。

本文将介绍Web 前端中table的各种用法，包括但不限于表格的基本结构、样式调整、事件处理、响应式布局等方面，帮助读者更好地掌握表格的灵活运用。

一、表格的基本结构在HTML中，表格由table、tr、td等元素构成。

其中，table是表格的容器，tr代表表格的一行，td代表表格中的单元格。

下面是一个简单的表格结构示例：```html<table><tr><td>尊称</td><td>芳龄</td></tr><tr><td>张三</td><td>25</td></tr><tr><td>李四</td><td>28</td></tr></table>```上面的代码定义了一个包含尊称和芳龄信息的简单表格，每个tr代表一行数据，每个td代表一个单元格。

这是表格的基本结构，我们可以根据实际需求，灵活运用这些元素，构建不同形式的表格。

二、表格的样式调整1. 表格边框样式在CSS中，可以通过border属性来设置表格的边框样式，具体示例如下：```csstable {border: 1px solid #000;}td {border: 1px solid #000;}```上面的代码定义了表格和单元格的边框样式，可以根据需要调整border的值，实现不同的边框效果。

2. 表格的宽度和高度除了边框样式，我们还可以通过CSS来设置表格的宽度和高度，具体示例如下：```csstable {width: 100;}td {height: 30px;}```上面的代码定义了表格的宽度为100，单元格的高度为30px，这样可以让表格在页面中占据合适的空间，使页面布局更加美观。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><title> 表格分页</title><meta name="Generator" content="EditPlus"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><script language="javascript">//注：样式有点丑，但是功能是实现的,按照的是每页显示10数据加一行表头var mytable;var my_new_table;var my_href1;var my_href2;var temp1=0;var temp2=0;var flag1 = false;var flag2 = false;var flag3 = false;var trows=0;var pags = 0;var count=0;function test(){mytable = document.getElementById("mtable");trows =mytable.rows.length;if (trows%10==0){pags=trows/10;}else{pags = parseInt(trows/10)+1;}if(trows>10){//隐藏mytable表格mytable.style.display="none";//则需要调用一个函数，将表格分页showTable();for (var i=0;i<pags ;i++ ){if (i==0)document.getElementById('mtable'+i).style.display="block";elsedocument.getElementById('mtable'+i).style.display="none";}showLink();}}function showLink(){my_div = document.createElement("div");//div属性my_div.id="div2";my_div.onclick="test2()";my_div.style.marginTop="68px";my_div.style.width="500px";my_div.style.height="32px";my_div.style.backgroundColor="pink";document.getElementById('div1').appendChild(my_div);//超链接1my_href1 = document.createElement("a");//超链接1属性my_href1.id="mf1";my_href1.href="#";my_href1.style.marginLeft="330px";my_href1.innerText="上一页";//超链接2my_href2 = document.createElement("a");//超链接2属性my_href2.id="mf2";my_href2.href="#";my_href2.style.marginLeft="20px";my_href2.innerText="下一页";//添加到div2中去flag1 = document.getElementById('div2').appendChild(my_href1);flag2 = document.getElementById('div2').appendChild(my_href2);addEvent();}function addEvent()//点击上一页if (flag1){var et1 = document.getElementById("mf1");et1.onclick = function (){if (temp2>0){temp2-=1;for (var i=0;i<pags ;i++ ){if (i==temp2)document.getElementById('mtable'+i).style.display="block";elsedocument.getElementById('mtable'+i).style.display="none";}}};}//点击下一页if (flag2){var et2 = document.getElementById("mf2");et2.onclick = function (){//注意此处条件要为pags-1 不然会显示出来一个空的table表if (temp2<pags-1){temp2+=1;for (var i=0;i<pags ;i++ ){if (i==temp2)document.getElementById('mtable'+i).style.display="block";elsedocument.getElementById('mtable'+i).style.display="none";}}};}}//完成创建共有多少张表function showTable()for (var count=0;count<pags ;count++ ){my_new_table = document.createElement("table");my_new_table.id = "mtable"+count;my_new_table.border=1;my_new_table.style.width="220px";my_new_table.style.height="270px";my_new_table.style.display="block";if(temp1+10<trows){//for中的11既是确定每页显示都少行for (var i=0;i<11 ;i++ ){var myRow = my_new_table.insertRow(i);for (var j=0;j<3 ;j++ ){if (i==0){myRow.insertCell(j).innerText=mytable.rows[i].cells[j].innerText;continue;}myRow.insertCell(j).innerText=mytable.rows[i+temp1].cells[j].innerText;}}}else{for (var i=0;i<trows-temp1 ;i++ ){var myRow = my_new_table.insertRow(i);for (var j=0;j<3 ;j++ ){if (i==0){myRow.insertCell(j).innerText=mytable.rows[i].cells[j].innerText;continue;}myRow.insertCell(j).innerText=mytable.rows[i+temp1].cells[j].innerText;}}}//表示创建一个my_new_table之后，将//mytable.rows[i+temp1].cells[j].innerText指向原来表格的下面10行数据头部temp1+=10;document.getElementById('div1').appendChild(my_new_table);}}//其余的功能实现起来也就简单了。

</script></head><body style="margin:0 auto;width:900px;height:625px;background-color:#;border:2px solid pink" onload="test()"><div id= "div1"style="margin:0 auto;width:500px;height:400px;background-color:#FAEBD7;border:1px solid black"><table id="mtable" border=1 bordercolor=pink style=" width:480px;height:500px;" ><thead><tr><th>国家</th><th>省或者市</th><th>省或者市</th><th>省或者市</th></tr></thead><tbody ><tr align="center" ><td>黄岩村1</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村2</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村3</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村4</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村5</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村6</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村7</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村8</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村9</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村10</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村11</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村12</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村13</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村14</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村15</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村16</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村17</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村18</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村19</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村20</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村21</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村22</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村23</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村24</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村25</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村26</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村27</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村28</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村29</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村30</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村31</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村32</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村33</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村34</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村251</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村261</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村271</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村281</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村291</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村301</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村311</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村321</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村331</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr><tr align="center" ><td>黄岩村341</td><td>黄岩村</td><td>黄岩村</td><td>黄岩村</td></tr></tbody></table></div></body></html>。