（1）<table>标签：声明一个表格，它的常用属性如下：

-- border属性 定义表格的边框，设置值是数值

-- cellpadding属性 定义单元格内容与边框的距离，设置值是数值

-- cellspacing属性 定义单元格与单元格之间的距离，设置值是数值

-- align属性 设置整体表格相对于浏览器窗口的水平对齐方式，设置值有：left（默认）|center|right

（2）<tr>标签：定义表格中的一行

（3）<td>和<th>标签：定义一行中的一个单元格，td代表普通的单元格，th表示表头单元格，它们的常用属性如下：

-- align 设置单元格中内容的水平对齐方式，设置值有：letf（默认）|center|right

-- valign 设置单元格中内容的垂直对齐方式 top|middle|bottom

-- colspan 设置单元格水平合并，设置值是数值

-- rowspan 设置单元格垂直合并，设置值是数值

<th>表头中的内容默认是加粗、居中展示的

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表格</title>

</head>

<body>

    <h1>表格</h1>

    <!-- table中的属性值不写单位，单位是像素 -->

    <!--

    <table border="1" width="300" height="200" align="center">

        <tr>

            <th>1</th>

            <th>2</th>

            <th>3</th>

        </tr>

        <tr>

            <td align="center">1</td>

            <td align="center">2</td>

            <td align="center">3</td>

        </tr>

        <tr>

            <td align="center">1</td>

            <td align="center">2</td>

            <td align="center">3</td>

        </tr>

    </table>

    -->

    <br />

    <!-- 创建表格，快捷键：table>(tr>td*5)*6  按Tab键  -->

    <table border="1" width="800" height="300" align="center">

        <tr>

            <th colspan="5" align="left">基本情况</th>

        </tr>

        <tr>

            <td width="15%">姓  名</td>

            <td width="25%"></td>

            <td width="15%">性  别</td>

            <td width="25%"></td>

            <td rowspan="5" width="20%" align="center"><img src="data:images/kity4.png" alt="照片" /></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>

    </table>

</body>

</html>

页面显示效果：

Html表格：的更多相关文章

  1. ASP.NET Aries 入门开发教程6：列表数据表格的格式化处理及行内编辑

    前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...

  2. 03.LoT.UI 前后台通用框架分解系列之——多样的表格

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  3. jQuery学习之路（6）- 简单的表格应用

    ▓▓▓▓▓▓ 大致介绍 在CSS技术之前,网页的布局基本都是依靠表格制作,当有了CSS之后,表格就被很多设计师所抛弃,但是表格也有他的用武之地,比如数据列表,下面以表格中常见的几个应用来加深对jQue ...

  4. 在Asp.Net中操作PDF – iTextSharp - 使用表格

    使用Asp.Net生成PDF最常用的元素应该是表格,表格可以帮助比如订单或者发票类型的文档更加格式化和美观.本篇文章并不会深入探讨表格,仅仅是提供一个使用iTextSharp生成表格的方法介绍 使用i ...

  5. DOM的小练习，两个表格之间数据的移动

    本次讲的是两个表格之间数据的移动,左边的表格移动到右边,并且左边表格移动内容消失. <head>   <meta http-equiv="Content-Type" ...

  6. JQuery实现表格的增加行和删除行

    利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http- ...

  7. jquery-treegrid树状表格的使用（.Net平台）

    上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:http://maxazan.github.io/jquery-treegrid/ 一. ...

  8. Python处理Excel表格

    同事小王今天说他有一个Excel表格,表格如下,一列是姓名,一列是电话号码,总共有大概2000行数据. 有的姓名占了一行,有的占了两行,还有一些占了三行的.如下图: 他问我可不可以全部统一成一行,而且 ...

  9. bootstrap表格

    Bootstrap 实例 - 边框表格 < 建立日期 2015-5-27 录入人员 test1 处理人员 test2 问题报障人   部门/城市公司   联系电话   问题类型   处理状态   ...

  10. SSRS 实用技巧 ---- 为表格添加展开/折叠操作（明细报表）

    相信很多人都会遇到这样的需求:当表格按照某几个列分组时,需要为组添加展开和折叠的操作. 最初展现表格的时候只展现最外层分组,然后点击展开后可以查看分组内的明细情况. 先来一张效果图,然后再看具体如何实 ...

随机推荐

  1. 洛谷 P1217

    题目链接如下https://www.luogu.org/problemnew/show/P1217 找出a到b 是回文数并且是素数的数. 这还不简单 前两天刚学的线性筛素数.卡卡卡卡一顿猛敲.最后一个 ...

  2. C++ ifstream ofstream

    原文出自[比特网],转载请保留原文链接:http://soft.chinabyte.com/database/460/11433960.sh [导读] ofstream是从内存到硬盘,ifstream ...

  3. 【loj6029】「雅礼集训 2017 Day1」市场&&【uoj#228】基础数据结构练习题

    题解: 这两道题加上区间取min max应该算线段树几道比较不寻常的题目 其实也是挺好理解的 对于区间/d 显然在log次后就会等于0 而我们注意到如果区间中数都相等那么就可以一起除 也就是说每个区间 ...

  4. alpha冲刺3/10

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:冲刺3 团队部分 后敬甲(组长) 过去两天完成了哪些任务 文字描述 组织第一次团队编程 继续阅读小程序开发文档 接下来的 ...

  5. Google搜索

    https://www.google.com/intl/br/insidesearch/tipstricks/all.html 如何用好谷歌等搜索引擎?

  6. centos 6.5升级内核到3.1

    1.查看本机内核版本 [root@localhost ~]# uname -r 2.6.32-358.el6.x86_64 2.安装含有内核软件的源 步骤一:导入证书 [root@localhost ...

  7. Apache Pulsar——企业级消息订阅系统介绍

    Apache Pulsar是一款由雅虎开发的类似于Kafka的企业级消息订阅系统,在2016将其开源,由Apach基金会孵化,现在已经成长为Apache基金会的顶级项目.Pulsar在雅虎内部已经运行 ...

  8. lvs-ldirectord

    Ldirectord;用来对后端服务器的检测状态后并进行操作  安装在director上 对后端的rs服务器的 健康检查包括几方面: 1通过ping 若可以ping到服务器表示主机活着 2 对端口的检 ...

  9. L3-007 天梯地图 （30 分) dijkstra

    本题要求你实现一个天梯赛专属在线地图,队员输入自己学校所在地和赛场地点后,该地图应该推荐两条路线:一条是最快到达路线:一条是最短距离的路线.题目保证对任意的查询请求,地图上都至少存在一条可达路线. 输 ...

  10. 029 c3p0的小测试

    今天被问到这个问题,就实验了一下,后续会继续补充一些配置项的意思. 一:操作步骤 1.大纲 2.新建sql -- ---------------------------- -- Table struc ...