如何制作一个表格？

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

<!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. .Net分布式异常报警系统-客户端及服务端API

    客户端 客户端的作用就是捕获未处理异常, 发送异常到服务端. 关于捕获未处理异常的方法参考 http://www.cnblogs.com/youring2/archive/2012/04/25/246 ...

  2. jquery 使用方法(转)

    原文: http://www.cnblogs.com/Chenfengtao/archive/2012/01/12/2320490.html jQuery是目前使用最广泛的javascript函数库. ...

  3. nios II--实验3——led 100M软件部分

    软件开发 参照实验二(led),该实验与实验二(led)的不同之处在于系统的时钟由50M提成为100M.运行结果,在调试窗口输出Hello from Nios II!,并且板上的四个LED灯流动显示, ...

  4. [CF#250 Div.2 D]The Child and Zoo(并查集）

    题目:http://codeforces.com/problemset/problem/437/D 题意:有n个点,m条边的无向图,保证所有点都能互通,n,m<=10^5 每个点都有权值,每条边 ...

  5. JavaScript的理解记录（3）

    ---接上篇 一.函数:    1. 函数定义后直接执行:var f = (function(x){ return x*10}(10)); 2. 函数的调用有四种方式: 作为函数:作为方法:作为构造函 ...

  6. Linux终端更改提示符

    打开~/.bashrc可以看到命令提示的内容为:\u@\h\w\$ \u表示用户名,\h表示主机名,\w表示当前目录,\$表示命令提示符(普通用户$,超级用户#) 这个命令提示符有点长,很碍事,\u@ ...

  7. Linux 配置只安装 64 位软件包

    Centos.RHEL等系统,yum 安装的时候有时候会安装32的,然而我们只需要安装64位的软件! 解决方法: yum只安装 64 位的包,只需在 /etc/yum.conf 中加入 "e ...

  8. TAR命令详解

    上图,VPN截图,画蛇添足! 在Linux中,压缩与解压用得最多的tar.tar命令确实很厉害. tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包 ...

  9. python基础_字典_列表_元组考试_day4

    1.请用代码实现:利用下划线将列表的每一个元素拼接成字符串,li=['alex','eric','rain'] li=['alex','eric','rain'] v="_".jo ...

  10. mysql 安装失败解决方法

    在安装mysql的过程中,出现的最麻烦的问题和解决方法 安装后,启动不成功,就卡了,程序就没有响应. 如何解决: 找到mysql安装目录下的 #Path to the database root da ...