h5表格

2020-04-09 19:54:49

<!-- h5新增的type的类型在提交整个表单的时候，验证是否符合邮箱的格式在提交的时候验证是否是一个网址检测 http:// 生成滑动条限制必须为数字搜索框颜色选取

–>

<!--      语义化结构标签：        section   更偏于划分区域。（网页的外围结构...更类似与div）        article   更偏向于内容的展示        aside     侧边栏（在一旁的）        header    网页头部或者是内容块头部        footer    网页的顶部或者内容快的底部        nav       导航区域。        figure    代表一个独立的区域        figcaption figure区域的标题        main      主体区域（IE不兼容）        hgroup    标题组

mark 高亮显示文本 time 用来处理时间 dialog 类似于对话框–>

更多相关内容

H5 表格冻结首行，首列和最后一行
2019-02-20 13:31:25

页面显示表格，表格的首行冻结，首列冻结，最后一行也冻结，实现数据查看和合计查看的效果。DemoDemoDemoDemo

收起

h5表格

千次阅读 2019-07-17 21:55:04

一个用table构造的表格 <!DOCTYPE html> 响应式静态页面太阳系数据点击链接打开</a></caption>  <th colspan="2"> 名字图片质量直径备注 <!-- 第...

table表单

<table>
	<tr>
		<td>11</td>
		<td>12</td>
	</tr>
	<tr>
		<td>21</td>
		<td>22</td>
	</tr>
	<tr>
		<td>31</td>
		<td>32</td>
	</tr>
</table>

11	12
21	22
31	32

   <table>
      <tr>
        <th colspan="2">Animals</th>
      </tr>
      <tr>
        <th colspan="2">Hippopotamus</th> //colspan=2占两列
      </tr>
      <tr>
        <th rowspan="2">Horse</th>
        <td>Mare</td>
      </tr>
      <tr>
        <td>Stallion</td>
      </tr>
      <tr>
        <th colspan="2">Crocodile</th>
      </tr>
      <tr>
        <th rowspan="2">Chicken</th> //rowspan=2占两行
        <td>Hen</td>
      </tr>
      <tr>
        <td>Rooster</td>
      </tr>
    </table>

html {
    font-family: sans-serif;
  }
  
  table {
    border-collapse: collapse;
    border: 2px solid rgb(200,200,200);
    letter-spacing: 1px;
    font-size: 0.8rem;
  }
  
  td, th {
    border: 1px solid rgb(190,190,190);
    padding: 10px 20px;
  }
  
  th {
    background-color: rgb(235,235,235);
  }
  
  td {
    text-align: center;
  }
  
  tr:nth-child(even) td {
    background-color: rgb(250,250,250);
  }
  
  tr:nth-child(odd) td {
    background-color: rgb(245,245,245);
  }
  
  caption {
    padding: 10px;
  }

<tr></tr>此行中添加<td colspan="2">Horse</td>占了两列，没有声明的<td>Mare</td>仍然只占了一列。待到下一次的<tr>Stallion</tr>就成就了Horse有两个子标题Mare和Stallion。

在这里插入图片描述

 <table>
    <colgroup>
                <col>
                <col>
                <col style="background-color: #97DB9A;">
                <col style="width: 42px;">
             
        	<col style="background-color: #97DB9A;">
        	<col style="background-color: #DCC48E; border:4px solid #C1437A;">
        	<col style="width: 42px">
        	<col style="width: 42px">
    </colgroup> 
  <tr>
    <th>&nbsp;</th>
    <td>Mon</td>
    <td>Tues</td>
    <td>Wed</td>
    <td>Thurs</td>
    <td>Fri</td>
    <td>Sat</td>
    <td>Sun</td>
  </tr>
  <tr>
    <th>1st Period</th>
    <th>English</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>German</th>
    <th>Dutch</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>      
  </tr>
  <tr>
    <th>2nd Period</th>
    <th>English</th>
    <th>English</th>
    <th>&nbsp;</th>
    <th>German</th>
    <th>Dutch</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>      
  </tr>
  <tr>
    <th>3rd Period</th>
    <th>&nbsp;</th>
    <th>German</th>
    <th>&nbsp;</th>
    <th>German</th>
    <th>Dutch</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
         
  </tr>
  <tr>
    <th>4th Period</th>
    <th>&nbsp;</th>
    <th>English</th>
    <th>&nbsp;</th>
    <th>English</th>
    <th>Dutch</th>    
    <th>&nbsp;</th>  
    <th>&nbsp;</th>    
  </tr>
  
</table>

在这里插入图片描述

table标签中，添加

<caption>这是一个主题内容 </caption> 
表单头
<thead>
<tr>
<th></th>
</tr>
</thead>
主题
<tbody></tbody>
表尾头
<tfoot>
<tr>
<th></th>
</tr>
</tfoot>

嵌套表单

<table>
<tr>
<td>
<table>
<tr>
	<th></th>
	<td></td>
<tr>
</table>
</td>
</tr>
</table>

一个用table构造的表格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>响应式静态页面</title>
        <link rel="stylesheet" href="table.css">
    </head>
    <body>
        
    <table>
        <caption>太阳系数据<a href="slkd">点击链接打开</a></caption>
        <!-- 第一行 -->
        <thead>
            <tr>
                <th colspan="2">&nbsp;</th>
                <th>名字</th>
                <th>图片</th>
                <th>质量</th>
                <th>直径</th>
                <th>备注</th>
            </tr>
        </thead>

    <tbody>
        <!-- 第二行 -->
        <tr>
            <!-- 第一列，需要占四行的空间 -->
            <td rowspan="4" colspan="2" >类地行星</td>
            <!-- 第二列 -->
                
           
                <td>水星</td>
                <td><img src="水星.jpg"></td>
                <td>0.330</td>
                <td>4.879</td>
                <td>距太阳最近</td>
        </tr>
        <tr>
                <td>金星</td>
                <td><img src="金星.jpg"></td>
                <td>0.330</td>
                <td>4.879</td>
                <td>&nbsp;</td>
        </tr>
        <tr>
                <td>地球</td>
                <td><img src="earth.png"></td>
                <td>0.330</td>
                <td>4.879</td>
                <td>&nbsp;</td>
        </tr>
        <tr>
                <td>火星</td>
                <td><img src="金星.jpg"></td>
                <td>0.330</td>
                <td>4.879</td>
                <td>&nbsp;</td>
        </tr>



        <tr>
            <th rowspan="4">类木行星</th>
            <th rowspan="2">气巨星</th>
            <td>木星</td>
            <td><img src="木星.jpg"></td>
            <td>1898</td>
            <td>142984</td>
            <td>太阳系最大</td>
        </tr>

         
         <tr>
            
            <td>土星</td>
            <td><img src="土星.jpg"></td>
            <td>1898</td>
            <td>142984</td>
            <td>&nbsp;</td> 
        </tr>、
        <tr>        
            <th rowspan="2">冰巨星</th> 
            <td>天王星</td>
             <td><img src="天王星.jpg"></td>
            <td>1898</td>
            <td>142984</td>
            <td>&nbsp;</td> 
        </tr>
        <tr>
            
            <td>海王星</td>
            <td><img src="海王星.jpg"></td>
            <td>1898</td>
            <td>142984</td>
            <td>&nbsp;</td>      
        </tr>




        <!-- 第四行 -->
        <tr>
            <td colspan="2">冰巨星</td>
            <td>冥王星</td>
            <td>
                <img src="冥王星.jpg">
            </td>
            <td>0.0146</td>
            <td>2370</td>
            <td>2006年降格，<a href="google.com">但是还存在争议</a></td>
        </tr>
    <tbody>   

    </table>
    
</body>
</html>

在这里插入图片描述

收起

展开全文

HTML

H5表格、表单、框架.ppt
2018-04-27 17:46:49

H5表格、表单、框架.ppt，包含介绍和例子，ppt！H5表格、表单、框架.ppt，包含介绍和例子，ppt！

收起
H5表格制作1
千次阅读 2018-07-02 22:49:16

<!DOCTYPE html> <title></title> 表格编号 <td colspan="3"></td> 修改状态 <td ></td> 版本 <td></td> </html>

<!DOCTYPE html>
<html>
<head>

<title></title>

</head>

<body>
<table border="1px" cellspacing="0" align="center" width="800" height="200">
<tr align="center">
<td width="200">表格编号</td>
<td colspan="3"></td>

</tr>

<tr>
<td align="center">修改状态</td>
<td ></td>
<td width="200" align="center">版本</td>
<td></td>

</tr>

</table>

</body>

</html>

收起

展开全文

H5表格的属性

万次阅读 2017-03-20 07:51:14

这是一片关于html表格制的文章！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<table border="5px" cellspacing="5px" bordercolor="blue" width="200px" height="50px"
        style="background: 100%;background-image:
         url('../../img/logo.png')"  align="center">
    <!--属性
    1：border 给表格添加边框  当border数值增大是，只有外围框线增加，单元格的边框是种为1px
    2：bordercolor 边框颜色
    3：width heigth表格宽高
    4：cellspacing:单元格于单元格之间的间隙距离，当cellspacing=0，只会使单元格间隙为0，
        但不会合并边框线,如果要合并边框线用 style="border-collapse: collapse"（不推荐在h5
        使用，h5向下兼容
     5：cellpadding 每个单元格中内容和边框的距离
      6：align：表格在屏幕的左中位置显示，left center
      注意
      7：bgcolor  背景颜色   或者在style中用background去修改
      8：背景图片 background   背景图片会覆盖北京颜色）-->
    <tr bgcolor="aqua" align="center">
        <td nowrap="nowrap ">手机充值手机充值手机充值手机充值</td>
        <td>IP卡</td>
        <td>网游</td>
    </tr>
    <!-- tr td属性
            1  也有宽高
            2  bgcolor 单元格的背景颜色
            3  align left center right 单元格中的文字，水平对齐方式
            4： valign： top bottom center 单元格中的文字，垂直对齐方式
            5：nowrap='nowrap' 单元格中文字不换行
            注意 1：当表格实行与行列属性冲突是 以行列属性为准（近者优先，就近原则）
    -->
    <tr bgcolor="#f0ffff" width="10px" height="30px" align="center" nowrap="nowrap" >
        <td valign="top"><移动手机充值手机></移动手机充值手机>充值手机充值</td>
        <td nowrap="nowrap">联手机充值手机充值通</td>
        <td nowrap="nowrap">电信</td>
    </tr>
</table>
<br/>
<br/>
<table>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>数学成绩</th>
        <th>语文成绩</th>
        <th>英语成绩</th>
    </tr>
    <tr>
        <td>1001</td>
        <td>张三</td>
        <td>100</td>
        <td>120</td>
        <td>888</td>
    </tr>
    <tr>
        <td>1002</td>
        <td>李四</td>
        <td>33</td>
        <td>333</td>
        <td>33</td>
    </tr>
    <tr>
        <td>1001</td>
        <td>张三</td>
        <td>100</td>
        <td>120</td>
        <td>120</td>
    </tr>
</table>
<br/>
<table border="2px">
    <tr>
        <td>第一行第一列</td>
        <td colspan="3">第一行跨三列</td><!--colspan占3列-->
    </tr>
    <tr>
        <td rowspan="3">第二行跨三行</td><!--rowspan占3行-->
        <td>第二列</td>
        <td>第三列</td>
        <td>第四列</td>
    </tr>
    <tr>
        <td>技术</td>
        <td>掘金</td>
        <td>手机</td>
    </tr>
    <br/>
    <table border="1" align="center">
        <tr>
            <td colspan="4" valign="center">jfajajaj</td>
        </tr>
        <tr>
            <td>fas</td>
            <td>das</td>
            <td>sda</td>
            <td>sdas</td>
        </tr>
        <tr>
            <td>sad</td>
            <td>dasd</td>
            <td>sdaa</td>
            <td>sdad</td>
        </tr>
        <tr>
            <td colspan="2" valign="center">dasd</td>
            <td colspan="2" valign="center">fasda</td>
        </tr>
        <tr>
            <td>fass</td>
            <td>fass</td>
            <td>fass</td>
            <td>fass</td>
        </tr>
        <tr>
            <td>fsgd</td>
            <td>fsgd</td>
            <td>fsgd</td>
            <td>fsgd</td>
        </tr>
        <tr>
            <td colspan="3" valign="center">fas</td>
            <td>sda</td>
        </tr>
        <tr>
            <td>sdas</td>
            <td>sdas</td>
            <td>sdas</td>
            <td>sdas</td>
        </tr>
        <tr>
            <td>gdgdf</td>
            <td>gdgdf</td>
            <td>gdgdf</td>
            <td>gdgdf</td>
        </tr>
    </table>
</table>
<br/>
<table border="1" align="center" bgcolor="#8a2be2" >
    <tr>
        <td rowspan="2" width="50px">sdsd</td>
        <td>sda</td>
        <td>sda</td>
    </tr>
    <tr>
        <td>qwer</td>
        <td>qwer</td>
    </tr>
    <tr>
        <td rowspan="2">rty</td>
        <td>qwr</td>
        <td>qwr</td>
    </tr>
    <tr>
        <td>qwer</td>
        <td>qwer</td>
    </tr>
</table>

<br/>
<table border="1" align="center" bgcolor="aqua">
    <tr>
        <td rowspan="6" width="100px" style="background-image: url('../../img/ie.jpg')">www</td>
        <td rowspan="3">dsa</td>
        <td rowspan="2">sada</td>
        <td>dasd</td>
    </tr>
    <tr>
        <td>sda</td>
    </tr>
    <tr>
        <td rowspan="2">asdas</td>
        <td>sda</td>
    </tr>
    <tr>
        <td rowspan="3">dwq</td>
        <td>wqw</td>
    </tr>
    <tr>
        <td rowspan="2">wq</td>
        <td>dwa</td>
    </tr>
    <tr>
        <td>adas</td>
    </tr>
</table>
<table border="1" align="center">
    <!--colgroup-->
    <caption>我是表格头</caption>
    <tr>
        <td colspan="2">wdas</td>
    </tr>
    <tr>
        <td rowspan="4" width="50px">sda</td>
    </tr>
    <tr>
        <td width="50px">dsa</td>
    </tr>
    <tr>
        <td>sd</td>
    </tr>
    <tr>
        <td>sd</td>
    </tr>
</table>
</body>
</html>

收起

展开全文

h5表格隔行换色
千次阅读 2017-11-09 18:32:04

<!DOCTYPE html> <title></title> *{ margin: 0 auto; } <script src="js/jquery-1.1

收起

高亮显示删除
h5表格小练习1
2018-09-26 22:08:13

最近刚接触h5,记录下一个小小的练习。基本知识：表格的基本组成table,tr,td. table(表格标记) tr(行标记) td(单元标记) 练习的代码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"...

收起
H5 学习之旅-H5表格（7）
2015-09-17 20:03:00

表格语法 table：简历表格 captian：表格标题 th：表格行表头 tr：表格行 td:单元格 thead：表格页眉 tfoot：表格页脚 tbody:表格主体 col：列属性！！！代码实例带标题的表格 ...

收起
H5表单美化
2018-10-26 17:22:46

h5+css3做的表单美化，方便修改，快来试试吧！！！！！！！！！

收起
H5表格设计
2016-10-17 20:27:00

H5表格设计 table 表 tr 行 td 主体列 th 表头列 caption 标题 thead 表头 tbody 主体内容 tfoot 结尾示例：代码： <!DOCTYPE html><html lang="en"><head> <meta ...

收起
h5学习笔记：写一个小表格
2021-12-31 17:09:34

在小程序里面，并没一个比较完善的表格控件。有时候希望有Element 那种table组件，但是在移动端里面展示table，要写完善是很困难，但是通过一些小小样式flex布局。可以简单地模拟一个表格展示效果。仅仅是一个展示的...

收起

css css3 html
html表格表单 H5
2021-11-15 21:46:12

表格标签; (1)创建表格 <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> 1.table用于定义一个表格。 2.tr 用于定义表格中的一行，必须嵌套在 table...

收起

html
H5 jQuery CSS3表单单选多选按钮.zip
2019-07-11 10:53:08

代码片段： .wrapper { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: -webkit-box;...}

收起
H5表格浅谈
2018-07-24 23:24:53

表格的语法 <table> <tr> <td> </td> </tr> </table> <tr> 行标签 <td>列标签表格...

收起

table
H5表格的例子
千次阅读 2017-03-24 17:52:05

表格如下 < table width= "500" align= "center" border= "1" > < colgroup style= " background-color : red ; " >  < col />  < col /> <!...

收起
h5 列表导出为excel
2017-11-01 16:50:48

把table列表导出为excel格式,可自定义表格宽高,表名字,等等.

收起
H5 表格标签基本使用
2016-12-25 20:55:00

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...21-表格标签基本使用<...--其实在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的,...

收起
uniapp 微信H5分享下载就能用
2021-12-15 16:19:22

针对uniapp 微信H5分享，我已经封装好，非常方便好用，有需要的朋友可以去下载，更多详细使用内容可以看我的博客https://blog.csdn.net/nihao123456789222/article/details/121954495

收起
H5+JS表格全选和删除
2021-12-12 19:42:24

H5+JS表格全选和删除

收起

javascript css
h5纯css实现表格的自适应布局
2021-04-26 12:03:56

“自适应布局”的特点是使用CSS媒体查询语句(@media screen and (...) )，让网页布局可以根据页面宽度自动做相应的调整，而不是原有网页制作，几种不同的尺寸就做几个相适应的页面...那么，怎样让一个传统的表格也表...

收起
uniapp 小程序 H5 移动端写 table 表格组件
2022-07-21 16:13:57

uniapp 写table

收起

javascript
h5的table表格边框线问题解决方案
2021-04-01 11:20:03

1.你的表格是这样： 2.也可能是这样的： 3.然后你给td一个个进行设置border可能就有了下面的效果： 4.上面是不是都挺丑的，可能尝试很多次改了很多次代码就是很丑，没事，下面是一种代码简便样式好看的效果： 5....

收起
H5纯前端生成Excel表格
2021-06-12 18:47:45

H5纯前端生成Excel表格方法如下：1 2 3 4 5 6 7 8 9 10 11 12 13 var arr = [14 {15 "姓名":"喵喵喵",16 "年龄":1,17 },18 {19 "姓名":"喵喵",20 "年龄":2,21 }22 ...

收起
h5 固定表头及列头demo
2017-12-01 15:10:12

根据一些思路写的一个固定第一行和第一列的demo，时间关系有点粗糙见谅，能自定适配h5,并修改容器大小也不会变形

收起
H5表格只显示最底下的线要怎么弄
2021-04-22 15:54:49

收起
当h5页面横向不能滚动，如何优雅的显示表格数据
2021-12-01 11:05:56

h5项目中经常会出现“使用协议/隐私政策”。这些内容一般都是服务端给返回的富文本。问题一般协议中难免会出现表格等形式展示更多的信息。但是对于产品人员或者法务人员给我们的富文本展示出来的表格。已经远远的...

收起
H5表格写课程表

// An highlighted block var foo = 'bar';

收起

javascript
表格自适应手机页面
2015-08-27 15:16:05

表格自适应手机站，给父元素添加.table-responsive类，这样宽度不会变，超出的会出现横向滚动条。互联网上最合适的表格自适应布局，你值得拥有。

收起

<!-- h5新增的type的类型在提交整个表单的时候，验证是否符合邮箱的格式在提交的时候验证是否是一个网址检测 http:// 生成滑动条限制必须为数字搜索框颜色选取

H5 表格冻结首行，首列和最后一行

h5表格

H5表格、表单、框架.ppt

H5表格制作1

H5表格的属性

h5表格隔行换色

h5表格小练习1

H5 学习之旅-H5表格（7）

H5表单美化

H5表格设计

h5学习笔记：写一个小表格

html表格表单 H5

H5 jQuery CSS3表单单选多选按钮.zip

H5表格浅谈

H5表格的例子

h5 列表导出为excel

H5 表格标签基本使用

uniapp 微信H5分享下载就能用

H5+JS表格全选和删除

h5纯css实现表格的自适应布局

uniapp 小程序 H5 移动端写 table 表格组件

h5的table表格边框线问题解决方案

H5纯前端生成Excel表格

h5 固定表头及列头demo

H5表格只显示最底下的线要怎么弄

当h5页面横向不能滚动，如何优雅的显示表格数据

H5表格写课程表

表格自适应手机页面

h5表格

<!-- h5新增的type的类型 在提交整个表单的时候，验证是否符合邮箱的格式 在提交的时候验证是否是一个网址 检测 http:// 生成滑动条 限制必须为数字 搜索框 颜色选取

H5 表格冻结首行，首列和最后一行

h5表格

H5表格、表单、框架.ppt

H5表格制作1

H5表格的属性

h5表格隔行换色

h5表格小练习1

H5 学习之旅-H5表格（7）

H5表单美化

H5表格设计

h5学习笔记：写一个小表格

html表格 表单 H5

H5 jQuery CSS3表单单选多选按钮.zip

H5表格浅谈

H5表格的例子

h5 列表导出为excel

H5 表格标签基本使用

uniapp 微信H5分享 下载就能用

H5+JS表格全选和删除

h5纯css实现表格的自适应布局

uniapp 小程序 H5 移动端 写 table 表格 组件

h5的table表格边框线问题解决方案

H5纯前端生成Excel表格

h5 固定表头及列头demo

H5表格只显示最底下的线要怎么弄

当h5页面横向不能滚动，如何优雅的显示表格数据

H5表格写课程表

表格自适应手机页面

h5表格

<!-- h5新增的type的类型在提交整个表单的时候，验证是否符合邮箱的格式在提交的时候验证是否是一个网址检测 http:// 生成滑动条限制必须为数字搜索框颜色选取

html表格表单 H5

uniapp 微信H5分享下载就能用

uniapp 小程序 H5 移动端写 table 表格组件