如何制作一个表格？

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

<!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. 使用windbg查看DependencyObject的属性

    这里以WPF作为探测用的例子,简单一些,看看Title的值是什么样子.(之所以写这个,因为不是简单的一个!do就能看到东西的,中间要绕两下,这也涉及到了DependencyObject的实现机制及数据 ...

  2. matlab eps

    matlab eps eps是一个函数.当没有参数时默认参数是1.返回的是该参数的精度. 也就是说单个的eps实际上是eps(1),表示的是1的精度. 这里要说一下精度的概念.浮点数所能表示的数值范围 ...

  3. 1020关于mysql一个简单语句的执行流程

    MySQL的语句执行顺序 转自http://www.cnblogs.com/rollenholt/p/3776923.html MySQL的语句一共分为11步,如下图所标注的那样,最先执行的总是FRO ...

  4. ECharts图表中级入门之formatter：夜谈关于ECharts图表内的数据格式化方法

    来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...

  5. Ubuntu14.04下安装tomcat

    1.官方网站下载最新的tomcat:http://tomcat.apache.org/download-80.cgi在ubuntu上,我们下载zip和tar.gz.Ubuntu14.04安装和配置To ...

  6. [转]Eclipse工具使用技巧总结

    首先推荐一篇非常好的How to use eclipse文章 ,讲的是eclipse使用的方方面面,非常实用,推荐给大家! 一.常用快捷键:Ctrl+F11 运行Ctrl+Shift+/ 在代码窗口中 ...

  7. 【URAL 1018】Binary Apple Tree

    http://vjudge.net/problem/17662 loli蜜汁(面向高一)树形dp水题 #include<cstdio> #include<cstring> #i ...

  8. react 属性与状态 学习笔记

    知识点:1.react 属性的调用 this.props.被调用的属性名 设置属性的常用方法:var props = { one: '123', two: 321}调用这个属性:<HelloWo ...

  9. thinkphp全站静态页实现方法

    1:在根目录下的全局index.php中加下面这行: define('HTML_PATH', './htm');//生成静态页面的文件位置 2:在项目的配置文件config.php中加下面这行: 'H ...

  10. eclipse中maven install和build，clean

    eclipse插件,m2eclipse 1.maven install相当于maven原生的命令: mvn install 2.aven build是 m2eclipse这个插件自己创造的概念,需要你 ...