HTML之表格制作

如何制作一个表格?

  如何制作一个表格呢?  观察如下代码:

<!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>之类的标签,这种语义化明显的标签不仅方便开发人员阅读,也有利于浏览器解析代码。

时间: 2024-10-20 02:14:53

HTML之表格制作的相关文章

iOS表格制作

由于项目上的需求,需要做一个表格出来,来显示流程状态.刚开始脑子一头雾水,没有一点思路,但是靠着自己的座右铭--"世上无难事,只怕有心人",克服了所有困难.好,不说了,讲正事. 制作表格,还是需要tableView来做. 1. 创建一个UIView对象 : UIView *tableViewHeadView=[[UIView alloc]initWithFrame:CGRectMake(0, 0, kCount*kWidth, kHeight)]; self.myHeadView=ta

关于使用表格制作页面

在HTML中,表格的功能挺强大的.表格由 <table> 标签以及一个或多个 tr.th或td 元素组成.单元格可以包含文本.图片.列表.段落.表单.水平线.表格等等.所以,我们可以利用表格来制作一个网页页面.我在做相关练习时发现,若单单使用表格来进行页面的制作,是存在一定的困难.当然现在我们可以利用css来轻松布局.在用表格制作网页时,需要明确的是整个网页中,应该如何划分表格.哪些地方可以直接用一个表格表示,或者哪些地方需要将单元格合并才达到效果.有了清晰的思路后,做起来才不会乱套. 我在利

LaTeX表格制作备忘一

LaTeX的普通表格制作比较简单,但是,如果要精确控制格式,就有些麻烦了.今天在做一些文档,其中用到某一种表格,现把代码与说明记录于此以备忘. 环境:Ubuntu 16.04 64位桌面版 LaTeX编辑工具:TeXstudio 代码如下: \documentclass[oneside, AutoFakeBold]{article} \usepackage{geometry} % 用于页面设置 % 设置为A4纸,并按照MSOffice的默认尺寸设置四周边距 \geometry{ a4paper,

用表格制作百度首页

前一天学习了<table>和一系列的小指令用来制作表格,然后老师布置了制作百度首页的任务,看上去像是很简单结果还是弄了一天的时间,好在最后知道了错误修改的还算美观. 制作很简单,就是小细节上的东西容易出错,所以刚开始学一定要养成有了开头接着写结尾的好习惯. 最上面的一行导航栏还算简单,做好表格大小分配好百分比,剩下的超链接什么的都是再简单不过的内容了. 百度的logo和百度一下这一行起初是规划在了一个表格内,怎么调试都没办法弄好,早上尝试了把他们两个分成了两个表格就简单多了. 个人觉得最头疼的

Latex:表格制作全攻略

给出一个制作复杂表格的例子,制作表格主要用到multicolumn,multirow和cline,其中,要使用multirow,必须usepackage{multirow} 如果要制作出如下图所示的表格: 则可以通过如下的代码: \begin{table*} \begin{tabular}{|c|c|c|c|c|} hline hline multirow{2}{*}{Multi-Row} & multicolumn{2}{|c|}{Multi-Column} & multicolumn{

叶签形式的表格制作

第一步:制作表格 var data = ${empty data ? "''" : data}; var kpiTabData = data["kpiTabData"]; var kpiObjectList = data["kpiObjectList"]; var row3 = '<tr name="data_row">'; row3 += '<td name="row_checkbox"

WPS表格 制作甘特图

一,数据 二,全选表格,插入堆积条形图 1. 删除"完成时间" 鼠标右击图表空隙->选择数据->删除完成时间->确定 2. 选中 蓝色框框(系列”起始时间”)右击->填充---> 无色 3. 记住最大值和最小值 A. 最小值具体看法:点击 最小起始时间 右击->设置单元格格式->数字->常规 最大值 一样. B. 点击X轴数据也就是显示日期的部分,坐标轴下填写最大值.最小值 3. 最后一步,点击Y轴数据选择坐标轴->逆序类别(就是上

学习10 table表格制作标签

<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>认识table表格标签</title> <style type="text/css"> table tr td,th{border:1px solid

第三节课 表格制作

表格是由三个基本标签构成,由外到里的顺序是<table><tr><td></td></tr></table> 举个例子: 如果是三行两列,顺序就是这样的 <tr> <td >        </td> <td>         </td> </tr> <tr> <td >        </td> <td>