如何制作一个表格？

　　如何制作一个表格呢？  观察如下代码：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>table</title>

</head>

<body>

		<table border='1' cellpadding="10" cellspacing='10' width="500" height="400" bgcolor="red">

		<caption style="caption-side:bottom; color:red; font-size:40px"> <b>花名册</b></caption>		

		<thead bgcolor="green">

			<tr>

				<th align="right">姓名</th>

				<th style="text-align:right">班级</th>

				<th align="right">电话</th>

			</tr>

		</thead> 

		<tbody bgcolor="yellow">

			<tr>

				<td valign="bottom">张三</td>

				<td rowspan="2" valign="top" background="picture.jpg" ;>材料42</td>

				<td>88888888</td>

			</tr>

			<tr>

				<td valign="bottom">李四</td>

				<td>

					<ul>

						<li>77777777</li>

						<li>66666666</li>

						<li>55555555</li>

					</ul>

				</td>

			</tr>

			<tr>

				<td valign="bottom">王五</td>

				<td colspan="2">材料45(no phone)</td>

			</tr>

		</tbody>

		</table>

</body>

</html>

上述html便可以得到如下表格：

当然，还有不少关于表格的特性我没有表现出来，比如 在table标签使用 border-collapse=collapse; 可以用一条线分离各个数据。

上述html代码中，我在标签中用了内联样式，这是为了方便大家直接的观察，但是根据结构与表现分离的原则，这些样式的实现最好在外部新建一个css。还需要注意的是：在表格中我们最好使用<thead><tbody><tfoot>之类的标签，这种语义化明显的标签不仅方便开发人员阅读，也有利于浏览器解析代码。

HTML之表格制作的更多相关文章

  1. Microsoft Excel Sheet/表格 制作折线图

    Microsoft Excel Sheet/表格 制作折线图 虽然比较简单,但是仍然需要稍微花一点功夫. 1.制作好表格数据 2.先将数据选定(不包括 横座标的 年月日或其他的刻度 的那一列) 3.插 ...

  2. Latex表格制作记录

    Latex表格制作记录 主要功能 合并表格的行列 长表格的使用 makecell例程借鉴 效果图 参考代码 \documentclass{ctexart} \usepackage{indentfirs ...

  3. Latex：表格制作全攻略

    给出一个制作复杂表格的例子,制作表格主要用到multicolumn,multirow和cline,其中,要使用multirow,必须usepackage{multirow} 如果要制作出如下图所示的表 ...

  4. iOS表格制作

    由于项目上的需求,需要做一个表格出来,来显示流程状态.刚开始脑子一头雾水,没有一点思路,但是靠着自己的座右铭--“世上无难事,只怕有心人”,克服了所有困难.好,不说了,讲正事. 制作表格,还是需要ta ...

  5. table表格制作

    分享一个简单的表格,代码如下: <table border=3 bordercolor=blue align=center cellspacing=3 cellpadding=6> < ...

  6. 表格制作模块xlwt

    import xlwtworkbook = xlwt.Workbook(encoding = 'ascii') #创建workbook 括号内容视情况而定sheetname = 'Sheet'book ...

  7. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  8. HTML 使用表格制作简单的个人简历

    复习一下HTML,用表格做一个简单的个人简历 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  9. 用表格制作商品购买页面--(table)

    实现效果如图: 首先来看布局,头部图片,内容从左到右分为四个部分   勾选+商品图片+商品名/买家+价格, 所以需要将头部用<td>包括起来,并且设置<td colspan=&quo ...

随机推荐

  1. linux的点滴积累

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #839496; background-color: rgba(1 ...

  2. [BZOJ1299]巧克力棒（博弈论）

    题目:http://hzwer.com/1976.html 分析:先Orz hzwer 对于盒子外面的巧克力棒,就是Nim游戏. 所以就很容易想到先手第一步最好从盒子中取出m根巧克力棒,使得这些巧克力 ...

  3. 用matlab实现同一个序列重复N倍

    同一个序列 重复N倍 怎么用matlab实现 可以使用repmat函数 repmat(A, 1, 3) 其中A即为复制的矩阵,1为纵向复制的次数,3即为横向复制的次数.

  4. ssh配置文件ssh_config和sshd_config区别

    问题描述:在一次配置ssh端口和秘钥登录过程中,修改几次都没有成功.最后发现修改的是ssh.config,原因是习惯tab一下,实在是眼拙! ssh_config和sshd_config配置文件区别: ...

  5. difference between append and appendTo

    if you need append some string to element and need set some attribute on these string at the same ti ...

  6. selector 和 shape结合使用

    <?xml version="1.0" encoding="utf-8"?><selector xmlns:android="htt ...

  7. PS转手绘

    2014-08-03  一.人物皮肤处理 复制两层图层,对背景图层隐藏,最后一层 高斯模糊 ,按住ALT创建图层蒙版, 使用画笔工具涂抹人物皮肤,眼睛不涂,把阴影和高光处抹均匀,最后应用图层蒙版,向下 ...

  8. LINUX下PHP开启短标签short_open_tag支持

    LINUX下PHP开启短标签short_open_tag支持 以CENTOS为例: 找到php.ini #find / -name php.ini #/etc/php.ini 编辑php.ini #v ...

  9. 【USACO】Transformations（模拟）

    Transformations A square pattern of size N x N (1 <= N <= 10) black and white square tiles is ...

  10. 让script的type属性等于text/html

    type属性为text/html的时候,<script>片断中定义一个被JS调用的代码,代码不会在页面上显示 <script id="commentTemplate&quo ...