精华内容
下载资源
问答
  • 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    类似于对话框–>

    更多相关内容
  • 页面显示表格表格的首行冻结,首列冻结,最后一行也冻结,实现数据查看和合计查看的效果。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>
    
    1112
    2122
    3132
       <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>
    

    在这里插入图片描述

    展开全文
  • 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(单元标记) 练习的代码: &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"...
  • 表格语法 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 ...
  • 在小程序里面,并没一个比较完善的表格控件。有时候希望有Element 那种table组件,但是在移动端里面展示table,要写完善是很困难,但是通过一些小小样式flex布局。可以简单地模拟一个表格展示效果。仅仅是一个展示的...
  • html表格 表单 H5

    2021-11-15 21:46:12
    表格标签; (1)创建表格 <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> 1.table用于定义一个表格。 2.tr 用于定义表格中的一行,必须嵌套在 table...
  • 代码片段: .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
    表格的语法 &lt;table&gt; &lt;tr&gt; &lt;td&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;tr&gt; 行标签 &lt;td&gt;列标签 表格...
  • 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分享,我已经封装好,非常方便好用,有需要的朋友可以去下载,更多详细使用内容可以看我的博客https://blog.csdn.net/nihao123456789222/article/details/121954495
  • H5+JS表格全选和删除

    2021-12-12 19:42:24
    H5+JS表格全选和删除
  • “自适应布局”的特点是使用CSS媒体查询语句(@media screen and (...) ),让网页布局可以根据页面宽度自动做相应的调整,而不是原有网页制作,几种不同的尺寸就做几个相适应的页面...那么,怎样让一个传统的表格也表...
  • uniapp 写table
  • 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项目中经常会出现“使用协议/隐私政策”。这些内容一般都是服务端给返回的富文本。 问题 一般协议中难免会出现表格等形式展示更多的信息。但是对于产品人员或者法务人员给我们的富文本展示出来的表格。已经远远的...
  • // An highlighted block var foo = 'bar';
  • 表格自适应手机页面

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,339
精华内容 10,935
关键字:

h5表格

友情链接: SODA_julei_2.rar