zoukankan      html  css  js  c++  java
  • html表格

    表格由<table>来定义,其中表格有若干行,用<tr>来表示,行又分为若干单元格,用<td>来表示。

    <table>的属性有:width宽度,height高度,border边框,cellpadding边距,cellspacing间距,align水平方向

    <tr>的属性有:height高度,width宽度

    <td>、<th>(表头)的属性有:height高度,align水平方向,valign垂直方向,bgcolor背景颜色

    合并单元格:colspan水平合并(向右合并),rowspan垂直合并(向下合并)

    表格标题:<caption>

    例如:

     1         <table>
     2             <caption>学生信息表</caption>
     3             <tr>
     4                 <th>学生编号</th>
     5                 <th>姓名</th>
     6                 <th>性别</th>
     7                 <th>年龄</th>
     8             </tr>
     9             <tr>
    10                 <td>1001</td>
    11                 <td>张三</td>
    12                 <td></td>
    13                 <td>12</td>
    14             </tr>
    15             <tr>
    16                 <td>1002</td>
    17                 <td>李四</td>
    18                 <td></td>
    19                 <td>23</td>
    20             </tr>
    21             <tr>
    22                 <td>1003</td>
    23                 <td>王五</td>
    24                 <td></td>
    25                 <td>45</td>
    26             </tr>
    27         </table>
    代码实例

    效果展示:

    学生信息表
    学生编号姓名性别年龄
    1001 张三 12
    1002 李四 23
    1003 王五 45
     1         <table border="1" cellpadding="0" cellspacing="0">
     2             <caption><b>中国高等教育学历查询结果</b></caption>
     3             <tr>
     4                 <td><b>姓名</b></td>
     5                 <td colspan="3">孙元升</td>
     6                 <td rowspan="4">
     7                     <img src="../0901/timg.jpg" width="100"/>
     8                 </td>
     9             </tr>
    10             <tr>
    11                 <td><b>性别</b></td>
    12                 <td></td>
    13                 <td><b>出生日期</b></td>
    14                 <td>1983年6月13日</td>
    15             </tr>
    16             <tr>
    17                 <td><b>入学时间</b></td>
    18                 <td>2009年9月1日</td>
    19                 <td><b>毕业时间</b></td>
    20                 <td>2006年7月1日</td>
    21             </tr>
    22             <tr>
    23                 <td><b>学历类型</b></td>
    24                 <td>普通</td>
    25                 <td><b>学历层次</b></td>
    26                 <td>本科</td>
    27             </tr>
    28             <tr>
    29                 <td><b>毕业院校</b></td>
    30                 <td colspan="2">景德镇陶瓷学院</td>
    31                 <td><b>院校所在地</b></td>
    32                 <td>江西省</td>
    33             </tr>
    34             <tr>
    35                 <td><b>专业名称</b></td>
    36                 <td colspan="2">工业设计</td>
    37                 <td><b>学习形式</b></td>
    38                 <td>普通全日制</td>
    39             </tr>
    40             <tr>
    41                 <td><b>证书编号</b></td>
    42                 <td colspan="2">104081200605001661</td>
    43                 <td><b>毕结业结论</b></td>
    44                 <td>毕业</td>
    45             </tr>
    46         </table>
    代码练习

    效果展示:

    中国高等教育学历查询结果
    姓名 孙元升
    性别 出生日期 1983年6月13日
    入学时间 2009年9月1日 毕业时间 2006年7月1日
    学历类型 普通 学历层次 本科
    毕业院校 景德镇陶瓷学院 院校所在地 江西省
    专业名称 工业设计 学习形式 普通全日制
    证书编号 104081200605001661 毕结业结论 毕业
  • 相关阅读:
    课上作业
    大道至简第四章读后感
    课上作业
    读大道至简第三章感想
    关于外部引用JS,中文乱码的问题
    HTML5 之Canvas绘制太阳系
    HTML5 之Canvas 绘制时钟 Demo
    JQuery仿淘宝商家后台管理 之 管理添加分类
    分页存储过程的几种写法
    Javascript-do_while....
  • 原文地址:https://www.cnblogs.com/liangdong/p/9614384.html
Copyright © 2011-2022 走看看