如何制作一个表格？

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

<!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. 深入理解拉格朗日乘子法（Lagrange Multiplier) 和KKT条件

    [整理]   在求解最优化问题中,拉格朗日乘子法(Lagrange Multiplier)和KKT(Karush Kuhn Tucker)条件是两种最常用的方法.在有等式约束时使用拉格朗日乘子法,在有 ...

  2. Social Emotional Computing

    from:数理情感学 http://choudh.blogchina.com/2556171.html 第五节  情感的三要素 人对于某一事物的情感,不仅取决于该事物的品质特性(如物理特性.化学特性. ...

  3. Failed to execute goal org.codehaus.cargo:cargo-maven2-plugin:1.2.3:run (default-cli) on project Maven_WebTest: Execution default-cli of goal org.codehaus.cargo:cargo-maven2-plugin:1.2.3:run failed: C

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  4. xml文件的生成与解析

    生成方法一:同事StringBuffer类对xml文件格式解析写入 package com.steel_rocky.xml; import android.app.Activity; import a ...

  5. The hierarchy of the type NsRedisConnectionFactory is inconsistent

    The hierarchy of the type is inconsistent 解释为:层次结构的类型不一致 由于我在eclipse里建了两个JAVA PROJECT项目,分别是A projiec ...

  6. canvas缓动2

    同之前的缓动原理.这里将终点换成鼠标,做出跟随效果 var canvas = document.getElementById("canvas"); var cxt=canvas.g ...

  7. 【POJ 1789】Truck History（最小生成树）

    题意:距离定义为两个字符串的不同字符的位置个数.然后求出最小生成树. #include <algorithm> #include <cstdio> #include <c ...

  8. perl reverse 函数

    参考 http://www.perlcn.com/perlbc/perljc/315.html 使用reverse操作符时,perl会先计算变量的值,也就是=右边的值,然后再进行复制,如果revers ...

  9. leetcode 402. Remove K Digits

    Given a non-negative integer num represented as a string, remove k digits from the number so that th ...

  10. 【BZOJ-1941】Hide and Seek KD-Tree

    1941: [Sdoi2010]Hide and Seek Time Limit: 16 Sec  Memory Limit: 162 MBSubmit: 830  Solved: 455[Submi ...