如何制作一个表格？

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

<!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. nios II--实验4——按键中断硬件部分

    按键中断 硬件开发 新建原理图 1.打开Quartus II 11.0,新建一个工程,File -> New Project Wizard…,忽略Introduction,之间单击 Next&g ...

  2. 准标识符(Quasi-dientifier, QI)

    Quasi-identifier From Wikipedia, the free encyclopedia Quasi-identifiers are pieces of information t ...

  3. JavaScript学习笔记-元素在滚动条滑动一定高度后自动置顶

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 【CSS】 background

    background: #22b4ff //背景色 url("http://images.cnblogs.com/cnblogs_com/oiliu/529256/o_titleIMG.jp ...

  5. 【JavaEE企业应用实战学习记录】sessionListener

    package sanglp.servlet; import javax.servlet.ServletContext; import javax.servlet.annotation.WebList ...

  6. myeclipse下java文件乱码问题解决

    中文乱码是因为编码格式不一致导致的.1.进入Eclipse,导入一个项目工程,如果项目文件的编码与你的工具编码不一致,将会造成乱码.2.如果要使插件开发应用能有更好的国际化支持,能够最大程度的支持中文 ...

  7. 理解CDN

    一.CDN定义 CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.通过 ...

  8. js函数声明

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. 【CodeVS 1199】【NOIP 2012】开车旅行

    http://codevs.cn/problem/1199/ 主要思想是倍增,对于第一个回答从后往前扫,依次插入平衡树中. 我写的splay,比较繁琐. #include<cmath> # ...

  10. python中的字符数字之间的转换函数

    int(x [,base ])         将x转换为一个整数     long(x [,base ])        将x转换为一个长整数     float(x )               ...