首页 > Web开发 > 详细

06-HTML-表格标签

时间:2019-02-07 23:01:43      阅读:206      评论:0      收藏:0      [点我收藏+]

<html>
 <head>
  <title>表格标签学习</title>
  <meta charset="utf-8"/>
  <!--
   表格标签学习:
   table:声明一个表格
    tr:声明一行,设置行高及行所有单元格的高度。
     th:声明一个单元格,表头格,默认加粗居中显示
     td:声明一个单元格,默认居左显示原始数据
    注意:
     行高即该行所有单元格的高度
     单元格的宽度即列宽
   属性:
    border:给表格添加边框
    width:设置表格的宽度
    height:设置表格的高度
    cellpadding:设置内容居边框的距离
    cellspacing:设置边框大小
   特点 :
    默认根据数据的多少进行表格的大小显示
  单元格的合并:
   第一步:
    首先确保表格是一个规整的表格
   第二步:
    根据要合并的单元格,找到其所在的源码位置
   第三步:
    行合并:在要合并的单元格中第一个单元格上使用属性rowspan="要合并的单元格的个数",并删除其他要合并的单元格完成合并
    列合并:在要合并的单元格中的任意一个上使用属性colspan="要合并的单元格的个数",并删除其他要合并的单元格
  -->
 </head>
 <body>
  <h3>表格标签学习</h3>
  <hr />
  <h3>表格标签的常用属性及设置学习</h3>
  <table border="1px" cellpadding="10px" cellspacing="10px">
    <tr height="100px">
     <th width="100px">科目</th>
     <th width="100px">分数</th>
     <th width="100px">级别</th>
     <th width="150px">说明</th>
    </tr>
    <tr height="100px">
     <td>java</td>
     <td>100</td>
     <td>8</td>
     <td>面向对象的语言</td>
    </tr>
    <tr height="100px">
     <td>C语言</td>
     <td>100</td>
     <td>8</td>
     <td>面向过程的语言</td>
    </tr>
  </table>
  <hr />
  <h4>单元格的合并学习:</h4>
  <table border="1px" cellspacing="0px">
   <tr height="35px">
    <td width="100px"></td>
    <td width="100px"></td>
    <td width="100px"></td>
    <td width="100px"></td>
    <td width="100px"></td>
   </tr>
   <tr height="35px">
    <td colspan="2"></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr height="35px">
    <td></td>
    <td></td>
    <td></td>
    <td rowspan="2"></td>
    <td></td>
   </tr>
   <tr height="35px">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
  </table>
 </body>
</html>

06-HTML-表格标签

原文:https://www.cnblogs.com/qust-lgh/p/10355660.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!