HTML学习笔记(七)表格的应用

表格标记<table>....</table>,行标记<tr>....</tr>,单元格标记<td>....</td>,表格的标题<caption>....</caption>,表格的表头,表头一般位于表格第一行,用来表明该列的内容类别<th>....</th>

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>单元格实例</title>
 6 </head>
 7 <h3>下面公布了某中学期中考试的成绩:</h3>
 8 <table>
 9   <caption>
10   期中考试成绩表
11   </caption>
12   <tr>
13     <th>姓名</th>
14     <th>语文</th>
15     <th>数学</th>
16     <th>英语</th>
17     <th>物理</th>
18     <th>化学</th>
19   </tr>
20   <tr>
21     <td>李1</td>
22     <td>94</td>
23     <td>89</td>
24     <td>87</td>
25     <td>56</td>
26     <td>97</td>
27   </tr>
28   <tr>
29     <td>孙2</td>
30     <td>94</td>
31     <td>87</td>
32     <td>84</td>
33     <td>86</td>
34     <td>87</td>
35   </tr>
36   <tr>
37     <td>王1</td>
38     <td>82</td>
39     <td>84</td>
40     <td>87</td>
41     <td>86</td>
42     <td>77</td>
43   </tr>
44 </table>
45 <body>
46 </body>
47 </html>

设置表格基本属性<table width="表格宽度" height="表格高度" align="表格对齐方式" border="表格边框宽度" bordercolor="边框颜色" cellspacing="内框宽度,即单元格之间的宽度" cellpadding="文字与边框的距离" bgcolor="表格背景颜色" background="背景图像地址">

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>设置表格属性</title>
 6 </head>
 7 <table background="1.jpg" border="1" bordercolor="#FF6633" width="600" height="600" cellspacing="3" cellpadding="10" align="center">
 8   <caption>
 9   明日公司员工通讯录
10   </caption>
11   <tr>
12     <th>姓名</th>
13     <th>地址</th>
14     <th>电话</th>
15     <th>电子邮件</th>
16   </tr>
17   <tr>
18     <td>李小米</td>
19     <td>长春市天富家园</td>
20     <td>1556705****</td>
21     <td>1556705****@qq.com</td>
22   </tr>
23   <tr>
24     <td>刘晓晓</td>
25     <td>长春市明珠</td>
26     <td>1556705****</td>
27     <td>1556705****@qq.com</td>
28   </tr>
29 </table>
30 <body>
31 </body>
32 </html>

设置表格的行属性<tr height="表格中某行高度" bordercolor="边框颜色" bgcolor="背景颜色" align="行文字的水平对齐方式" valign="行文字的垂直对齐方式"></tr>

<caption align="表格标题的垂直对齐方式">表格的标题</caption>

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>设置表格属性</title>
 6 </head>
 7 <table width="500" border="1" bordercolor="#0000FF">
 8   <caption align="bottom">
 9   某公司员工工资讯录
10   </caption>
11   <tr bgcolor="#33FFFF">
12     <th>姓名</th>
13     <th>基本工资</th>
14     <th>岗位工资</th>
15     <th>绩效工资</th>
16     <th>工龄工资</th>
17   </tr>
18   <tr align="left" bordercolor="#FF0000">
19     <td>李1</td>
20     <td>1000</td>
21     <td>600</td>
22     <td>800</td>
23     <td>400</td>
24   </tr>
25   <tr>
26     <td>王2</td>
27     <td>800</td>
28     <td>600</td>
29     <td>800</td>
30     <td>200</td>
31   </tr>
32 </table>
33 <body>
34 </body>
35 </html>

设置单元格属性,默认情况下,单元格的大小会根据内容自动调整,也可以进行手动调整<td width="单元格宽度" height="单元格高度">

单元格水平跨度和垂直跨度<td colspan="跨的列数" rowspan="单元格跨行数">

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>设置单元格行列跨度</title>
 6 </head>
 7 <table border="1" bordercolor="#00CCFF" cellspacing="0" cellpadding="5">
 8   <caption>
 9   网上书店
10   </caption>
11   <tr>
12     <td colspan="2">销售分类</td>
13   </tr>
14   <tr>
15     <td rowspan="3">电脑书籍</td>
16     <td>编程类</td>
17   </tr>
18   <tr>
19     <td>图形图像类</td>
20   </tr>
21   <tr>
22     <td>数据库类</td>
23   </tr>
24   <tr>
25     <td rowspan="2">考试专区</td>
26     <td>中考高考</td>
27   </tr>
28   <tr>
29     <td>考研类</td>
30   </tr>
31 </table>
32 <body>
33 </body>
34 </html>

单元格对齐方式、单元格的背景色、单元格的边框颜色<td align="水平对齐方式" valign="垂直对齐方式" bgcolor="背景颜色" bordercolor="颜色代码">

单元格的亮边框、单元格的暗边框<td bordercolorlight="颜色代码" bordercolordark="颜色代码">

单元格的背景图像<td background="背景图片的地址">

表格的标头标记<thead bgcolor="颜色代码" align="水平对齐方式" valign="垂直对齐方式"></thead>,表格的表主体标记<tbody bgcolor="颜色代码" align="水平对齐方式" valign="垂直对齐方式"></tbody>,表格的表尾标记<tfoot bgcolor="颜色代码" align="水平对齐方式" valign="垂直对齐方式"></tfoot>

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>设置表的样式</title>
 6 </head>
 7 <table align="center" border="1" bordercolor="#FFCC99" cellpadding="3" width="550" height="180">
 8   <caption>
 9   某单位物理管理表
10   </caption>
11   <thead bgcolor="#FF0000" align="center" valign="middle">
12     <tr>
13       <th>物品名</th>
14       <th>类型</th>
15       <th>领取人</th>
16       <th>领取人所属部门</th>
17       <th>数量</th>
18     </tr>
19   </thead>
20   <tbody>
21     <tr>
22       <td>圆珠笔</td>
23       <td>文具</td>
24       <td>李小米</td>
25       <td>PHP</td>
26       <td>1</td>
27     </tr>
28     <tr>
29       <td>鼠标</td>
30       <td>电脑配件</td>
31       <td>潘小东</td>
32       <td>ASP.NET</td>
33       <td>1</td>
34     </tr>
35     <tr>
36       <td>打印纸</td>
37       <td>办公耗材</td>
38       <td>刘小欣</td>
39       <td>JAVA</td>
40       <td>30</td>
41     </tr>
42   </tbody>
43   <tfoot bgcolor="#00CCFF" align="right" valign="middle">
44     <tr>
45       <td colspan="5">表格创建日期:2011-11-20</td>
46     </tr>
47   </tfoot>
48 </table>
49 <body>
50 </body>
51 </html>
时间: 2024-10-10 21:31:46

HTML学习笔记(七)表格的应用的相关文章

第十七篇:博采众长--初探WDDM驱动学习笔记(七)

基于WDDM驱动的DirectX视频加速重定向框架设计与实现 现在的研究生的论文, 真正质量高的, 少之又少, 开题开得特别大, 动不动就要搞个大课题, 从绪论开始到真正自己所做的内容之间, 是东拼西凑地抄概念, 抄公式, 达到字数篇幅的要求, 而自己正真做了什么, 有哪些实际感受, 做出的内容, 相比前面的东拼西凑就几点内容, 之后就草草结束, 步入感谢的段落. 原因不光只有学生自己, 所谓的读研, 如果没有一个环境, 学生有再大的愿望, 再强的毅力, 到头来也只是空无奈. 有些导师要写书,

马哥学习笔记七——LAMP编译安装之MYSQL

1.准备数据存放的文件系统 新建一个逻辑卷,并将其挂载至特定目录即可.这里不再给出过程. 这里假设其逻辑卷的挂载目录为/mydata,而后需要创建/mydata/data目录做为mysql数据的存放目录. 2.新建用户以安全方式运行进程: # groupadd -r mysql # useradd -g mysql -r -s /sbin/nologin -M -d /mydata/data mysql # chown -R mysql:mysql /mydata/data 3.安装并初始化my

Lua学习笔记(七):迭代器与泛型for

1.迭代器与闭包 迭代器是一种支持指针类型的结构,它可以遍历集合的每一个元素.在Lua中我们常常使用函数来描述迭代器,每次调用该函数就返回集合的下一个元素. 迭代器需要保留上一次成功调用的状态和下一次成功调用的状态,也就是他知道来自于哪里和将要前往哪里.闭包提供的机制可以很容易实现这个任务.记住:闭包是一个内部函数,它可以访问一个或者多个外部函数的外部局部变量.每次闭包的成功调用后这些外部局部变量都保存他们的值(状态).当然如果要创建一个闭包必须要创建其外部局部变量.所以一个典型的闭包的结构包含

python学习笔记七:条件&循环语句

1.print/import更多信息 print打印多个表达式,使用逗号隔开 >>> print 'Age:',42 Age: 42   #注意个结果之间有一个空格符 import:从模块导入函数 import 模块 from 模块 import 函数 from 模块 import * 如果两个模块都有open函数的时候, 1)使用下面方法使用: module1.open()... module2.open()... 2)语句末尾增加as子句 >>> import ma

swift学习笔记(七)自动引用计数

与Object-c一样,swift使用自动引用计数来跟踪并管理应用使用的内存.当实例不再被使用时,及retainCount=0时,会自动释放是理所占用的内存空间. 注:引用计数仅适用于类的实例,因为struct和enumeration属于值类型,也就不牵涉引用,所以其存储和管理方式并不是引用计数. 当一个实例被初始化时,系统会自动分配一定的内存空间,用于管理属性和方法.当实例对象不再被使用时,其内存空间被收回. swift中的引用类型分为三种,即Strong强引用,weak弱引用和无主引用unw

Swift学习笔记七:闭包

闭包可以 捕获 和存储其所在上下文中任意常量和变量的引用. Swift 会为您管理在 捕获 过程中涉及到的内存操作. 在 函数 章节中介绍的全局和嵌套函数实际上也是特殊的闭包,闭包采取如下三种形式之一: 1. 全局函数是一个有名字但不会捕获任何值的闭包 2. 嵌套函数是一个有名字并可以捕获其封闭函数域内值的闭包 3. 闭包表达式是一个可以捕获其上下文中变量或常量值的没有名字的闭包 一.闭包表达式 闭包函数类似于Objective-C中的block.下面我们用事实说话: let counts =

Linux System Programming 学习笔记(七) 线程

1. Threading is the creation and management of multiple units of execution within a single process 二进制文件是驻留在存储介质上,已被编译成操作系统可以使用,准备执行但没有正运行的休眠程序 进程是操作系统对 正在执行中的二进制文件的抽象:已加载的二进制.虚拟内存.内核资源 线程是进程内的执行单元 processes are running binaries, threads are the smal

html+css学习笔记 5[表格、表单]

表格 -- 默认样式重置 表格标签:     table 表格     thead 表格头     tbody 表格主体     tfoot 表格尾     tr 表格行     th 元素定义表头     td 元素定义表格单元 表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充   单元格合并 rowspan  属性规定单元格可横跨的行数.     <td rowspan="2"

CCNA学习笔记七——路由概述

静态路由协议: 动态路由协议:AS(自治系统):执行统一路由策略的一组设备的集合 EGP(外部网关协议): BGP:边界网关协议 IGP(内部网关协议): 距离矢量协议: RIP:V1,V2 IGRP EIGRP 链路状态路由协议: OSPF IS-IS 静态路由: 特点: 路由表是手工设置的 除非网络管理员干预,否则静态路由不会发生变化 路由表的形成不需要占用网络资源 适合环境 一般用于网络规模很小,拓扑结构固定的网络中 默认路由: 特点: 在所有路由类型中,默认路由优先级最低 适用环境: 一

[傅里叶变换及其应用学习笔记] 七. 傅里叶正(反)变换复习

这份是本人的学习笔记,课程为网易公开课上的斯坦福大学公开课:傅里叶变换及其应用. 傅里叶变换没有统一的定义 符号 傅里叶变换的符号在不同的书籍可能有不同的写法: 如正变换的符号:$\eta f(s)$,$\hat{f}(s)$,$F(s)$ 如反变换的符号:$\eta^{-1}f(t)$,$\check{f}(t)$,$f(t)$ 公式 傅里叶变换的公式也没有统一的写法: 本课程采用的是如下公式 $\eta f(s) = \displaystyle{\int_{-\infty}^{\infty}