精华内容
下载资源
问答
  • HTML表格

    千次阅读 2019-09-23 20:05:13
    HTML表格 @(HTML) 基本语法与结构 基本结构 <table> 表格  属性:border边缘宽度,width表格宽度 <tr>行 <td>普通单元格 <th>表头单元格(加粗居中显示) <caption>表格...

    HTML表格

    @(HTML)

    基本语法与结构

    基本结构

    • <table> 表格
       属性:border边缘宽度,width表格宽度

    • <tr>

    • <td>普通单元格

    • <th>表头单元格(加粗居中显示)

    • <caption>表格标题,居中显示
      创建一个两行三列的表格:

        <table border="1">
        <tr>
        	<th>2014</th> 			
        	<th>2015</th>
        	<th>2016</th>
        </tr>
        <tr>
        	<td>8000</td>
        	<td>10000</td>
        	<td>12000</td>
        </tr>
        </table>
      

    优化:带结构的表格(各部分分开加载,用户体验更佳)
    表格划分为三部分:表头、主体、脚注

    • <thead> 表格的头(标题之类)
    • <tbody>表格的主体(数据主题)
    • <tfoot>表格的脚注
      注:这三个标签不会影响表的布局,只是在加载时一块一块加载,反之,则同时加载完整表格。
      表格属性
    • <table>表格属性:
      [外链图片转存失败(img-ZhNllP80-1569240298282)(./img_0532.png)]
    • <tr>标签属性:
      [外链图片转存失败(img-jQNn6YqF-1569240298283)(./fullsizerender1.jpg)]
      注:需要让结构内所有标签保持某一属性,只需对结构标签进行属性设置

    跨列属性colspan
    跨越两列的单元格

    <td colspan="2">内容</td>
    

    跨行属性rowspan
    跨越两行的单元格

    <td rowspan="2">内容</td>
    

    嵌套表格:可在<td>内插入一个表格

    展开全文
  • HTML 表格

    千次阅读 2012-12-16 23:02:26
    1.HTML简单表格 构建表格Tag用法:整个表格开始用table;每一行开始用tr;每一单元开始用td。 一行一列的表格 100 一行三列的表格 ...2.HTML表格的表头 横向表头的表格 name gender age Chri

    1.HTML简单表格

    <html>
    <body>
    <p>
    构建表格Tag用法:整个表格开始用table;每一行开始用tr;每一单元开始用td。
    </p>
    <h4>一行一列的表格</h4>
    <table border="1">
    <tr>
    <td>100</td>
    </tr>
    </table>
    <h4>一行三列的表格</h4>
    <table border="1">
    <tr>
    <td>100</td> <td>200</td> <td>300</td>
    </tr>
    </table>
    <h4>两行三列的表格</h4>
    <table border="1">
    <tr>
    <td>100</td> <td>200</td> <td>300</td>
    </tr>
    <tr>
    <td>100</td> <td>200</td> <td>300</td>
    </tr>
    </table>
      </body>
    </html>
    



    2.HTML表格的表头

    <html>
    <body>
    <h4>横向表头的表格</h4>
    <table border="1">
    <tr>
    <th>name</th> <th>gender</th> <th>age</th>
    </tr>
    <tr>
    <td>Christy</td> <td>female</td> <td>22</td>
    </tr>
    </table>
    <h4>竖向表头的表格</h4>
    <table border="1">
    <tr>
    <th>name</th> <td>Christy</td>
    </tr>
    <tr>
    <th>gender</th> <td>female</td>
    </tr>
    <tr>
    <t h>age</th> <td>22</td>
    </tr>
    </table>
      </body>
    </html>
    



    3.带标题的表格

    <html>
    <body>
    <table border="1">
    <caption>标题</caption>
    <tr>
    <td>100</td> <td>200</td> <td>300</td>
    </tr>
    <tr>
    <td></td> <td>200</td> <td>300</td>
    </tr>
    </table>
    
      </body>
    </html>
    



    4.包含多行或多列的表格单元格

    <html>
    <body>
    <h4>用colspan属性,设置包含多列的单元格</h4>
    <table border="1">
    <tr>
    <th>name</th> <th colspan="3">courses</th>
    </tr>
    <tr>
    <td>Christy</td> <td>phycology</td> <td>math</td> <td>chemistry</td>
    </tr> 
    </table>
    <h4>用rowspan属性,设置包含多行的单元格</h4>
    <table border="1">
    <tr>
    <th>name</th> <td>Christy</td>
    </tr>
    <tr>
    <th rowspan="3">courses</th> <td>phycology</td> 
    </tr>
    <tr>
    <td>math</td>
    </tr>
    <tr> 
    <td>chemistry</td>
    </tr>
    </table>
      </body>
    </html>
    



    5.一个表格单元格里嵌套各种内容

    <html>
    <body>
    <table border="1">
    <tr>
    <td>
    <p>这是一段</p>
    <p>这是另一段</p>
    </td>
    <td>这个单元格里包含一个表格:
    <table border="1">
    <tr> <td>A</td> <td>B</td> </tr>
    <tr> <td>C</td> <td>D</td> </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td>这个单元格包含一张图片:
    <img src="http://www.blabla.cn/images/icons/go.gif">
    </td>
    </tr>
    </table>
      </body>
    </html>
    


    6.表格的cellpadding属性

    <html>
    <body>
    <h4>未设置cellpadding的表格</h4>
    <table border="1">
    <tr>
    <td>100</td> <td>200</td> <td>300</td>
    </tr>
    <tr>
    <td>100</td> <td>200</td> <td>300</td>
    </tr>
    </table>
    <p>cellpadding:单元格内容和单元格边界的距离</p>
    <h4>cellpadding值为10的表格</h4>
    <table border="1" cellpadding="10">
    <tr>
    <td>100</td> <td>200</td> <td>300</td>
    </tr>
    <tr>
    <td>100</td> <td>200</td> <td>300</td>
    </tr>
    </table>
    
      </body>
    </html>
    


    7.表格cellspacing属性

    <html>
    <body>
    <p>cellspacing:单元格之间的距离。未设置cellspacing,默认值为1</p>
    
    <h4>未设置cellspacing的表格</h4>
    <table border="1">
    <tr>
    <td>100</td> <td>200</td> <td>300</td>
    </tr>
    <tr>
    <td>100</td> <td>200</td> <td>300</td>
    </tr>
    </table>
    
    <h4>cellspacing值为0的表格</h4>
    <table border="1" cellspacing="0">
    <tr>
    <td>100</td> <td>200</td> <td>300</td>
    </tr>
    <tr>
    <td>100</td> <td>200</td> <td>300</td>
    </tr>
    </table>
    
    <h4>cellspacing值为10的表格</h4>
    <table border="1" cellspacing="10">
    <tr>
    <td>100</td> <td>200</td> <td>300</td>
    </tr>
    <tr>
    <td>100</td> <td>200</td> <td>300</td>
    </tr>
    </table>
    
      </body>
    </html>
    


    8.表格加背景颜色或背景图片

    <html>
    <body>
    
    <h4>表格加背景图片</h4>
    <table border="1" background="http://www.blabla.cn/images/icons/go.gif">
    <tr>
    <td>100</td> <td>200</td> <td>300</td>
    </tr>
    <tr>
    <td>100</td> <td>200</td> <td>300</td>
    </tr>
    </table>
    
    <h4>表格加背景颜色</h4>
    <table border="1" bgcolor="red">
    <tr>
    <td>100</td> <td>200</td> <td>300</td>
    </tr>
    <tr>
    <td>100</td> <td>200</td> <td>300</td>
    </tr>
    </table>
    
      </body>
    </html>
    


    9.表格单元格背景颜色或背景图片

    <html>
    <body>
    
    <table width="190" border="1" >
    <tr>
    <td bgcolor="red">100</td> 
    <td background="http://www.blabla.cn/images/icons/go.gif">200</td> 
    <td >300</td>
    </tr>
    <tr>
    <td>100</td> <td>200</td> <td>300</td>
    </tr>
    </table>
    
      </body>
    </html>
    



    10.表格单元格对齐方式(align)

    <html>
    <body>
    
    <table width="350" border="1" >
    <tr>
    <td align="center">100</td> <td align="left">200</td> <td align="right">300</td>
    </tr>
    <tr>
    <td>100</td> <td>200</td> <td>300</td>
    </tr>
    </table>
    
      </body>
    </html>
    



    展开全文
  • HTML表格和表格属性

    千次阅读 2020-08-27 09:59:49
    HTML表格简介 表格由 < table> 标签来定义。每个表格均有若干行(由 < tr> 标签定义),每行被分割为若干单元格(由 < td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。...

    HTML表格简介

    表格由 < table> 标签来定义。每个表格均有若干行(由 < tr> 标签定义),每行被分割为若干单元格(由 < td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

    表格标签

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

    表格实例

    所有表格标签

    <table border="1">
    <caption>国家属性表</caption>
      <thead>
        <tr>
          <th>国家</th>
          <th>首都</th>
    	  <th>所属州</th>
    	  <th>阵营</th>
        </tr>
      </thead>
       <colgroup>
        <col span="2" style="background-color:red">
        <col style="background-color:yellow">
    	<col style="background-color:green">
      </colgroup>
       <tbody>
        <tr style="background-color:blue">
          <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>
    	<tr>
    		<td>法国</td>
    		<td>巴黎</td>
    		<td>欧洲</td>
    		<td>资本</td>
    	</tr>
    	<tr>
    		<td>英国</td>
    		<td>伦敦</td>
    		<td>欧洲</td>
    		<td>资本</td>
    	</tr>
      </tbody>
      <tfoot>
        <tr>
    		<td colspan="4">国家属性表,定义于2020/8/27</td>
    	</tr>
      </tfoot>
    </table>
    

    效果图:
    这里需要注意,我在中国这一列给他添加了一个背景为blue的样式,他就覆盖了前面使用col给他赋的属性
    在这里插入图片描述

    没有边框的表格

    实例

    <h4>这个表格没有边框:</h4>
    <table>
    <tr>
      <td>100</td>
      <td>200</td>
      <td>300</td>
    </tr>
    <tr>
      <td>400</td>
      <td>500</td>
      <td>600</td>
    </tr>
    </table>
    
    <h4>这个表格没有边框:</h4>
    <table border="0">
    <tr>
      <td>100</td>
      <td>200</td>
      <td>300</td>
    </tr>
    <tr>
      <td>400</td>
      <td>500</td>
      <td>600</td>
    </tr>
    </table>
    

    效果图
    在这里插入图片描述

    跨行或跨列单元格

    代码

    <h4>单元格跨两列:</h4>
    <table border="1">
    <tr>
      <th>Name</th>
      <th colspan="2">Telephone</th>
    </tr>
    <tr>
      <td>Bill Gates</td>
      <td>555 77 854</td>
      <td>555 77 855</td>
    </tr>
    </table>
    
    <h4>单元格跨两行:</h4>
    <table border="1">
    <tr>
      <th>First Name:</th>
      <td>Bill Gates</td>
    </tr>
    <tr>
      <th rowspan="2">Telephone:</th>
      <td>555 77 854</td>
    </tr>
    <tr>
      <td>555 77 855</td>
    </tr>
    </table>
    

    效果图
    在这里插入图片描述

    单元格间距

    代码

    <h4>没有单元格间距:</h4>
    <table border="1">
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
    </table>
    
    <h4>单元格间距="0":</h4>
    <table border="1" cellspacing="0">
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
    </table>
    
    <h4>单元格间距="10":</h4>
    <table border="1" cellspacing="10">
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
    </table>
    
    

    效果图
    在这里插入图片描述

    表格内标签

    代码

    <table border="1">
    <tr>
      <td>
       <p>这是一个段落</p>
       <p>这是另一个段落</p>
      </td>
      <td>这个单元格包含一个表格:
       <table border="1">
       <tr>
         <td>A</td>
         <td>B</td>
       </tr>
       <tr>
         <td>C</td>
         <td>D</td>
       </tr>
       </table>
      </td>
    </tr>
    <tr>
      <td>这个单元格包含一个列表
       <ul>
        <li>apples</li>
        <li>bananas</li>
        <li>pineapples</li>
       </ul>
      </td>
      <td>HELLO</td>
    </tr>
    </table>
    

    效果图
    在这里插入图片描述

    漂亮的表格

    <style>
    @charset "utf-8";
    /* CSS Document */
    .tabtop13 {
    	margin-top: 13px;
    }
    .tabtop13 td{
    	background-color:#ffffff;
    	height:25px;
    	line-height:150%;
    }
    .font-center{ text-align:center}
    .btbg{background:#e9faff !important;}
    .btbg1{background:#f2fbfe !important;}
    .btbg2{background:#f3f3f3 !important;}
    .biaoti{
    	font-family: 微软雅黑;
    	font-size: 26px;
    	font-weight: bold;
    	border-bottom:1px dashed #CCCCCC;
    	color: #255e95;
    }
    .titfont {
    	
    	font-family: 微软雅黑;
    	font-size: 16px;
    	font-weight: bold;
    	color: #255e95;
    	background: url(../images/ico3.gif) no-repeat 15px center;
    	background-color:#e9faff;
    }
    .tabtxt2 {
    	font-family: 微软雅黑;
    	font-size: 14px;
    	font-weight: bold;
    	text-align: right;
    	padding-right: 10px;
    	color:#327cd1;
    }
    .tabtxt3 {
    	font-family: 微软雅黑;
    	font-size: 14px;
    	padding-left: 15px;
    	color: #000;
    	margin-top: 10px;
    	margin-bottom: 10px;
    	line-height: 20px;
    }
    </style>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td align="center" class="biaoti" height="60">受理员业务统计表</td>
      </tr>
      <tr>
        <td align="right" height="25">2020-08-27---2020-08-27</td>
      </tr>
    </table>
    
    <table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class="tabtop13" align="center">
      <tr>
        <td colspan="2" class="btbg font-center titfont" rowspan="2">受理员</td>
        <td width="10%" class="btbg font-center titfont" rowspan="2">受理数</td>
        <td width="10%" class="btbg font-center titfont" rowspan="2">自办数</td>
        <td width="10%" class="btbg font-center titfont" rowspan="2">直接解答</td>
        <td colspan="2" class="btbg font-center titfont">拟办意见</td>
        <td colspan="2" class="btbg font-center titfont">返回修改</td>
        <td colspan="3" class="btbg font-center titfont">工单类型</td>
      </tr>
      <tr>
        <td width="8%" class="btbg font-center">同意</td>
        <td width="8%" class="btbg font-center">比例</td>
        <td width="8%" class="btbg font-center">数量</td>
        <td width="8%" class="btbg font-center">比例</td>
        <td width="8%" class="btbg font-center">建议件</td>
        <td width="8%" class="btbg font-center">诉求件</td>
        <td width="8%" class="btbg font-center">咨询件</td>
      </tr>
      <tr>
        <td width="7%" rowspan="8" class="btbg1 font-center">受理处</td>
        <td width="7%"  class="btbg2">王艳</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td class="btbg2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td class="btbg2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td class="btbg2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td class="btbg2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td class="btbg2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td class="btbg2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td class="btbg2 font-center">总计</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
      </tr>
      <tr>
        <td width="7%" rowspan="8" class="btbg1 font-center">话务组</td>
        <td width="7%"  class="btbg2">林江涛</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td class="btbg2">林江涛</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td class="btbg2">林江涛</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td class="btbg2">林江涛</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td class="btbg2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td class="btbg2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td class="btbg2">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
       <tr>
        <td class="btbg2 font-center">总计</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
        <td class="btbg2 font-center">20</td>
      </tr>
    </table>
    

    效果图
    在这里插入图片描述

    各属性演示

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>表格</title>
    </head>
    <body >
    <!--
    1.表格
    作用:存放数据
    
    border   边框
    width   宽
    height  高
    align  水平对齐方式
    cellspacing   单元格之间的距离
    cellpadding   内容和边框之间的距离
    
    了解
    bgcolor   背景颜色
    background   背景图片(优先级大于背景颜色)
    
    
    2.行的属性
    valign  垂直对齐方式
    middle   默认值,居中
    top   居上
    bottom  居下
    
    align  水平对齐
    height   高
    
    
    3.列td的属性
    align
    valign
    width
    height
    
    
    
    -->
    <!--<table border="1" width="600" height="300" align="center"-->
            <!--background="images/pic2.jpg" bgcolor="skyblue">-->
        <!--<tr>-->
            <!--<td>三行三列的表格的点点滴滴</td>-->
            <!--<td>三行三列的表格</td>-->
            <!--<td>三行三列的表格</td>-->
        <!--</tr>-->
        <!--<tr>-->
            <!--<td>三行三列的表格</td>-->
            <!--<td>三行三列的表格</td>-->
            <!--<td>三行三列的表格</td>-->
        <!--</tr>-->
        <!--<tr>-->
            <!--<td>三行三列的表格</td>-->
            <!--<td>三行三列的表格</td>-->
            <!--<td>三行三列的表格</td>-->
        <!--</tr>-->
    <!--</table>-->
    
    
    <!--table>tr*3>td*3-->
    
    <table border="1" width="800" align="center" cellspacing="0" cellpadding="20">
        <tr bgcolor="pink"  align="right" height="200" valign="middle">
            <td>打款发货的理发店</td>
            <td>打款发货的理发店</td>
            <td>打款发货的理发店</td>
        </tr>
        <tr>
            <td bgcolor="purple" width="600" height="200">打款发货的理发店</td>
            <td>打款发货的理发店</td>
            <td>打款发货的理发店</td>
        </tr>
        <tr>
            <td>打款发货的理发店</td>
            <td>打款发货的理发店</td>
            <td>打款发货的理发店</td>
        </tr>
    </table>
    </body>
    </html>
    

    效果
    在这里插入图片描述

    展开全文
  • JAVAWeb html表格

    千次阅读 2019-10-06 15:38:18
    JAVAWeb html表格 表格的基本结构 一、标记 1、基本格式 <table 属性1=“属性值1” 属性2=“属性值2”…>表格内容 单元格1 单元格1 2、table标记的属性 (1)、width属性 (2)、height属性 (3)、border...

    JAVAWeb html表格

    表格的基本结构

    一、标记

    1、基本格式

    <table 属性1=“属性值1” 属性2=“属性值2”......>表格内容</table>
    <table>
    	<tr>
    		<td>单元格1</td>
    		<td>单元格1</td>
    	</tr>
    </table>
    

    2、table标记的属性

    (1)、width属性
    (2)、height属性
    (3)、border属性
    				表示表格外边框的长度
    (4)、align属性:表格显示的位置
    				a、left居左
    				b、center居中
    				c、right居右
    				**默认值left**
    (5)、cellspacing属性
    		单元格之间的间距,默认为2px,单位像素
    		<table  cellspacing="">
    		</table>
    (6)、cellpadding属性
    		单元格内容与单元格边框的显示距离,单位像素
    			<table  cellpadding="">
    		</table>
    (7)、frame属性
    			a、作用
    			b、属性
    			
    (8)、rules属性
    			a、作用
    			控制是否显示以及如何显示单元格之间的分割线
    			b、属性
    				1)none(默认值):表示无分割线
    				2)all表示包括所有分割线
    				3)rows:表示仅有行分割线
    				4)clos:表示仅有列分割线
    				5)groups:表示仅在行组和列组之间有分割线
    

    3、caption属性

    (1)、什么时候使用
    			如果表哥需要使用标题,那么可以使用caption标记
    (2)、如何正确使用
    			caption属性的插入位置,直接位于table属性之后,tr表格行之前
    (3)、align属性
    		a、top:标题放在表格上部
    		b、bottom:标题放在表格下部
    		c、left:标题放在表格左部
    		d、right:标题放在表格右部
    
    			<table  cellspacing="1" with="80" align="center" border="0">
    			<caption>华府</caption>
    			<thead>
    				<tr>
    						<th>姓名</th>
    						<th>性别</th>
    						<th>年龄</th>
    					</tr>
    			</thead>
    			<tbody   align="center">
    					<tr>
    						<td>小明</td>
    						<td></td>
    						<td>20</td>
    					</tr>
    					<tr>
    						<td>小明</td>
    						<td></td>
    						<td>20</td>
    					</tr>
    					<tr>
    						<td>小明</td>
    						<td></td>
    						<td>20</td>
    					</tr>
    			<tbody>
    			<tfoot align="center" bgcolor="">
    				<tr>
    					<td colspan="3">一共三人</td>
    				</tr>
    		</table>
    
    华府
    姓名 性别 年龄
    小花 20
    小花 20
    小花 20
    一共三人

    4、tr标记

    定义表格的一行,对于每一个表格行,都是由一对<tr>....</tr>标记表示,每一行<tr>标记内可以嵌套多个<td>或者<th>标记。
    

    5、th与td区别

    1)<td>和<th>都是单元格的标记,其必须嵌套在<tr>标签内,成对出现
    2)<th>标记通常位于首行或者首列,<th>中的文字默认会被加粗,<td>不会
    3)<td>是数据标记,表示该单元格的具体数据
    4)两者标记的属性是一样的
    

    6、thead、tbody、tfoot的使用

    为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用TBODY可以优化显示。如果表格很长,用tbody分段,可以一部分一部分地显示,不用等整个表格都下载完成
    
      TBODY包含行的内容下载完优先显示,不必等待表格结束.另外,还需要注意一个地方。表格行本来是从上向下显示的。但是,应用了thead/tbody/tfoot以后,就“从头到脚”显示,不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面,html显示时,还是以先thead后tbody显示。
    

    thead 表格的头 用来放标题之类的东西
    tbody 表格的身体 放数据本体
    tfoot  表格的脚 放表格的脚注之类

    展开全文
  • HTML表格布局

    千次阅读 2018-12-04 08:48:27
    HTML表格布局 表格布局简单有层次感:只需表格标签就能实现 二话不说直接上代码和效果图: 效果图: 无标题文档 网站logo 网页的头 标题栏 标题栏 标题栏 标题栏 标题栏 标题栏 .....
  • html表格样式:单线条表格

    千次阅读 2018-07-13 21:44:15
    html表格样式:单线条表格&lt;table width="300" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" style="border-collapse:...
  • 前端HTML表格标签缩写含义: 标签 英文含义 中文翻译 tr table row 表格行 td table data cell 表格数据单元格 th table head cell 表头单元格 前端HTML表格属性简介 前端HTML...
  • python生成html表格

    千次阅读 2019-02-20 14:31:02
    最近做一个小工具,需要将统计数据生成html表格。在网上搜罗一圈后发现用pandas生成表格非常好用。代码如下: import pandas as pd def convertToHtml(result,title):  #将数据转换为html的table  #result是list...
  • html 表格字符居中显示HTML table provides the ability to show text, data, and other elements. While using tables we may want to center the table or table contents to the center. Centering the table and...
  • html表格详解

    千次阅读 2012-11-20 11:20:31
    html表格详解 2010-08-28 17:49 HTML表格用表示。一个表格可以分成很多行(row),用表示;每行又可以分成很多单元格(cell),用表示。这三个Tag是创建表格最常用的Tag。 两行(Row)三列(Column)的表格 100 ...
  • HTML表格制作

    万次阅读 多人点赞 2019-06-11 20:58:30
    HTML中制作表格有两种方法: (1)先把最原始的表格画出来,每一个都是单个单元格,然后再根据要求进行行合并或列合并,有的表格需要行列都合并,则也是把它分为两步做,先合并行再合并列(或者先合并列再合并行)...
  • html表格标题标签_HTML标题标签

    千次阅读 2020-08-01 13:32:38
    html表格标题标签The headings are an important aspect in a document. The heading could be provided on the webpage through HTML. 标题是文档中的重要方面。 该标题可以通过HTML在网页上提供。 There six ...
  • html表格美化css

    千次阅读 2018-01-10 10:49:50
    分享三种笔者常用的html表格美化css: (效果如上图)表格美化/* reset */html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, ...
  • HTML表格单元格合并

    千次阅读 2018-05-08 16:08:41
    -------------------------------------HTML表格单元格合并-------------------------------表格中单元格的合并 Colspan:列合并 代码示例:&lt;html&gt; &lt;head&gt; &lt;title&gt;...
  • html表格怎么拆分

    千次阅读 2018-11-20 09:46:12
    html表格的拆分:rowspan占几行 colspan占几列 用在td标签,不用在tr标签 例如 &lt;table style="border:1px solid #000;"&gt;  &lt;tr style="border:1px solid #000;"&gt;...
  • html表格及传统布局

    千次阅读 2018-04-19 22:00:54
    html表格 table常用标签 1、table标签:声明一个表格 2、tr标签:定义表格中的一行 3、td和th标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格 table常用属性: 1、border 定义表格的边框 ...
  • html表格解析

    万次阅读 2018-03-16 15:00:19
    表格的行:tr 每行中的列:td  表格的表头:<th></th> 默认加粗,单元格居中(居中、加粗) align="middle"  表格标题:caption  跨列:colspan,当某个格跨n列时,colspan ="n...
  • HTML表格(table)实例

    万次阅读 2018-07-30 16:45:23
    HTML表格(table)实例 实例1:课程表 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot...
  • 网页|HTML表格制作

    千次阅读 2020-02-19 00:00:00
    欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。问题描述用html表格制作如何能够做出一个类似Excel...
  • js如何将html表格导出为excel文件 jsp页面数据导出成excel的方法很多,今天介绍一种简单的js方法: 源码 // 导出 $scope.doExportExcel = function() { var winname = window.open('', '_blank', 'top=10000'); ...
  • js如何将html表格导出为excel文件(后记) 前言 项目前期做了个导出Excel表格的功能,但是经过测试发现只有在IE上才可以正确实现,在Chrome等浏览器中无法实现导出效果。经过上网搜索,尝试通过插件的形式实现。通过...
  • CSS表格布局与HTML表格

    千次阅读 2018-07-19 09:47:04
    在学习HTML和CSS时,我们会发现在CSS布局中有表格HTML中也有表格,那么这两个表格有什么区别呢?   CSS中的表格是一种布局方式,它比较适合内容需要分栏时使用。而HTML中的表格,是确确实实存在表格数据的。...
  • HTML表格中实现自动换行

    千次阅读 2019-05-29 13:53:54
    HTML表格中实现自动换行 直接加入属性: word-wrap:break-word; 这样子就行了,你的表格就不会被撑大变形。
  • 用Python组装html表格

    千次阅读 2018-11-19 11:15:33
    用Python发邮件在之前已经尝试过,组装html表格也不难,搜了下html的语法然后依样画葫芦拼接下: html_header = '''&lt;table border="1"&gt; &lt;tr&gt; &lt;th&gt;序号&lt;...
  • Python网络编程:手写生成html表格

    千次阅读 2019-09-04 20:36:55
    html表格标签 常用标签生成函数 嵌套列表 -> 表格 字典 -> 跨行表格 NLP版(NER) html表格标签 常用标签生成函数 嵌套列表 -> 表格 字典 -> 跨行表格 NLP版(NER) <table> 表格 <th> 表格的表头 <tr> 表格的行 ...
  • HTML表格(HTML 表格的使用,收藏这一篇就够了)

    千次阅读 多人点赞 2020-10-15 18:01:32
    HTML基础之表格 文章目录HTML基础之表格1. 表格的定义2. 表格的标签3. 单元格边框(border)4. 合并单元格4.1 合并行单元格(colspan)4.2 合并列单元格(rowspan)5. 表格格式设置5.1 单元格的对齐(align)(居中,左...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 46,279
精华内容 18,511
关键字:

html表格