HTML学习之表格

HTML建立表格：

§使用表格可以划分页面的布局

格式：<table>..</table>

<table>

<tr><td>表格中的一行数据</td></tr>  <!--表格中的一行数据-->

<tr><td>表格中的二行数据</td></tr>  <!--表格中的一行数据-->

<tr><td>表格中的三行数据</td></tr>  <!--表格中的一行数据-->

</table>

测试实例如下：

<html>
<head>
	<title>标题</title>
</head>

<body>
	<table border="1">
		<tr><td>表格中的一行数据</td><td>表格中的一行数据</td></tr>
		<tr><td>表格中的二行数据</td><td>表格中的二行数据</td></tr>
		<tr><td>表格中的三行数据</td><td>表格中的三行数据</td></tr>
 	</table>

</body>
</html>

<table>标签的属性：

border  设置表格边框

caption  设置表格标题

align     设置表格在网页中的布局

width     设置表格宽度

height     设置表格高度

cellspacing  设置表格各单元格之间距离

cellpadding  设置单元格内部与文本之间的间距

bordercolor  设置表格边框颜色

bordercolorlight   设置表格亮面颜色

Bordercolordark       设置表格暗面颜色

测试程序如下：

<html>
<head>
	<title>标题</title>
</head>

<body>
	<table border="1" width="50%" height="100" bordercolorlight="#FF0000" bordercolordark="#00FF00">

		<tr><td>表格中的一行数据</td><td>表格中的一行数据</td></tr>
		<tr><td>表格中的二行数据</td><td>表格中的二行数据</td></tr>
	    <tr><td>表格中的三行数据</td><td>表格中的三行数据</td></tr>
	</table>
</body>
</html>

<tr>标签的属性：  bgcolor设置背景颜色。align 设置行对齐方式。   valign 设置单元格垂直对齐方式

测试程序如下：

<html>
<head>
	<title>标题</title>
</head>

<body>
		<table  width="400" border="1">
			<tr bgcolor="#0099FF"><td>表格中的一行数据</td><td>表格中的一行数据</td></tr>
			<tr align="right"><td>表格中的二行数据</td><td>表格中的二行数据</td></tr>
	    	<tr valign="top"><td height="50">表格中的三行数据</td><td>表格中的三行数据</td></tr>
		</table>
</body>
</html

<td>和<th>标签的属性：

bgcolor    设置单元各背景颜色

rowspan   设置单元格所占行数

colspan    设置单元格所占的列数

align          设置对齐方式

valign        设置单元格垂直对齐方式

width         设置单元格宽度

height        设置单元格高度

测试程序如下：

<html>
<head>
	<title>标题</title>
</head>

<body>
<table  width="400" border="1">
	<tr><td bgcolor="#0099FF">表格中的一行数据</td><td align="center">表格中的一行数据</td></tr>
			<tr><td>表格中的二行数据</td><td>表格中的二行数据</td></tr>
	    	<tr><td>表格中的三行数据</td><td>表格中的三行数据</td></tr>
	</table>

		<hr>
		<B>rowspan</B>

      	<table  width="400" border="1">
			<tr> <td rowspan="3">一行数据</td> <td>第一行数据</td></tr>
			<tr>						       <td>第二行数据</td></tr>
	    	<tr>                               <td>第三行数据</td></tr>
		</table>

		<hr>
		<B>colspan</B>

		<table  width="400" border="1">
			<tr><td colspan="2">第一行数据</td></tr>
			<tr><td>第二行数据</td><td>第二行数据</td></tr>
	    	<tr><td>第三行数据</td><td>第三行数据</td></tr>
		</table>

		<hr>
		<B>th</B>

		<table border="1">
			<tr><th>表格中的一行数据</th><th>表格中的一行数据</th></tr>
			<!--前者用来显示数据的名称，后者用来显示数据的内容。-->
			<tr><td>表格中的二行数据</td><td>表格中的二行数据</td></tr>
	    	<tr><td>表格中的三行数据</td><td>表格中的三行数据</td></tr>
	</table>
</body>
</html>
时间： 2024-07-28 20:28:22

HTML学习之表格的相关文章

android学习——TableLayout表格布局

TableLayout表格布局 TableLayout是指将子元素的位置分配到行或列中.Android的一个TableLayout有许多TableRow组成,每一个TableRow都会定义一个Row.TableLayout容器不会显示Row,Column,及Cell的边框线,每个Row拥有0个或多个Cell,每个Cell拥有一个View对象. 在使用tablelayout时,应注意每一个cell的宽度. 我们下面通过XML布局和Java代码布局两种方式分别举例: 一.XML方式布局 1.创建一个

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据

鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-12/175.html ------------------------------------------------------------------------------------------ 效果图: 这里用servlet技术简单处理下: UserServices.java package cn.com.shuyangyang.servi

HTML 学习笔记(表格)

HTML 表格 HTML中的表格使用标签<table>来实现,每个表格均有若干行由<tr>标签来定义,每个<tr>表示一行.美航被分为若干个单元格用<td>标签来实现.<td>标签内包含的是单元格的内容. 数据单元格可以包含文本 图片 列表 段落 表单 水平线表格等内容. HTML表格的边框属性 如果不定义边框属性 表格将不显示边框 有时候这很有用 但是大多数的时候 我们希望显示边框 表格的边框属性 是 border 可以规定边框的宽度 和 颜色

AngularJS 学习之表格

1.ng-repeat指令可以完美的显示表格: 2.在表格中显示数据: <div ng-app="myApp" ng-controller=""customersCtrl> <table> <tr ng-repeat="x in names"> <td>{{x.Name}}</td> <td>{{x.Country}}</td> </tr> </

ExtJS4.2学习(五)表格渲染与复选框

鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-10/174.html ---------------------------------------------------------------------------------------- 本博客介绍了如何对表格的列进行渲染及在行号前加入复选框. 以下是效果图: 代码: /** * Grid * 此js演示了如何对列的样式进行渲染以及如何为

CSS学习记录——表格

HTML部分 表格 表格由 table标签来定义.每个表格均有若干行(由 tr 标签定义),每行被分割为若干单元格(由 td标签定义).字母 td 指表格数据(table data),即数据单元格的内容.数据单元格可以包含文本.图片.列表.段落.表单.水平线.表格等等. <table> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> &

js学习总结----表格排序及dom映射

一.表格排序 //1.先把元素集合类数组转化为数组 var ary = utils.listToArray(oLis);//上几节封装好的listToArray //2.给数组进行排序:按照每一个li中的内容大小进行排序 ary.sort(function(a,b){ return parseFloat(a.innerHTML) - parseFloat(b.innerHTML) }) //3.按照ary中存储的最新顺序依次的把对应的li添加到页面当中 var frg = document.cr

HTML学习之表格属性

表格的基本元素<table></table>  <tr>定义行标签</tr>   <td>定义列标签</td>  <th>表格内的表头单元格</th> <thead>定义在thead下的标签不论在HTML代码中你放置在什么位置都会以表头形式显示</thead> 同理 <tbody></tbody>   以及<tfoot></tfoot>.

前端学习02-01表格标签

表格可以固定文本或图像的显示位置 表格标签 <table></table> 属性:bgcolor, border, bordercolor,bordercolorlight,bordercolordark,cellspacing,cellpadding,width,height <tr></tr> 属性:align,valign,bgcolor <td></td> 属性:width,height,align,valign,colspa