HTML表格样式
一、表格的表头
1 <html>
2
3 <body>
4
5 <h4>表头：</h4>
6 <table border="1">
7 <tr>
8 <th>姓名</th>
9 <th>电话</th>
10 <th>电话</th>
11 </tr>
12 <tr>
13 <td>Bill Gates</td>
14 <td>555 77 854</td>
15 <td>555 77 855</td>
16 </tr>
17 </table>
18
19 <h4>垂直的表头：</h4>
20 <table border="1">
21 <tr>
22 <th>姓名</th>
23 <td>Bill Gates</td>
24 </tr>
25 <tr>
26 <th>电话</th>
27 <td>555 77 854</td>
28 </tr>
29 <tr>
30 <th>电话</th>
31 <td>555 77 855</td>
32 </tr>
33 </table>
34
35 </body>
36 </html>
二、跨行跨列的表格
1 <html>
2
3 <body>
4
5 <h4>横跨两列的单元格：</h4>
6 <table border="1">
7 <tr>
8 <th>姓名</th>
9 <th colspan="2">电话</th>
10 </tr>
11 <tr>
12 <td>Bill Gates</td>
13 <td>555 77 854</td>
14 <td>555 77 855</td>
15 </tr>
16 </table>
17
18 <h4>横跨两行的单元格：</h4>
19 <table border="1">
20 <tr>
21 <th>姓名</th>
22 <td>Bill Gates</td>
23 </tr>
24 <tr>
25 <th rowspan="2">电话</th>
26 <td>555 77 854</td>
27 </tr>
28 <tr>
29 <td>555 77 855</td>
30 </tr>
31 </table>
32
33 </body>
34 </html>
三、frame控制围绕表格边框
1 <html>
2 <body>
3
4 <p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>
5
6 <p>Table with frame="box":</p>
7 <table frame="box">
8 <tr>
9 <th>Month</th>
10 <th>Savings</th>
11 </tr>
12 <tr>
13 <td>January</td>
14 <td>$100</td>
15 </tr>
16 </table>
17
18 <p>Table with frame="above":</p>
19 <table frame="above">
20 <tr>
21 <th>Month</th>
22 <th>Savings</th>
23 </tr>
24 <tr>
25 <td>January</td>
26 <td>$100</td>
27 </tr>
28 </table>
29
30 <p>Table with frame="below":</p>
31 <table frame="below">
32 <tr>
33 <th>Month</th>
34 <th>Savings</th>
35 </tr>
36 <tr>
37 <td>January</td>
38 <td>$100</td>
39 </tr>
40 </table>
41
42 <p>Table with frame="hsides":</p>
43 <table frame="hsides">
44 <tr>
45 <th>Month</th>
46 <th>Savings</th>
47 </tr>
48 <tr>
49 <td>January</td>
50 <td>$100</td>
51 </tr>
52 </table>
53
54 <p>Table with frame="vsides":</p>
55 <table frame="vsides">
56 <tr>
57 <th>Month</th>
58 <th>Savings</th>
59 </tr>
60 <tr>
61 <td>January</td>
62 <td>$100</td>
63 </tr>
64 </table>
65
66 </body>
67 </html>
HTML表格样式的更多相关文章
- delphi 设置表格样式。
//设置表格样式 wordDoc.Tables.Item(1).Borders.Item(Word.WdBorderType.wdBorderLeft).LineStyle = Word.WdLine ...
- CSS：表格样式（设置表格边框/文字/背景的样式）
使用CSS能够制作出十分精美的表格. 代码整理自w3school:http://www.w3school.com.cn 效果图: 代码: <!DOCTYPE html PUBLIC " ...
- 普通table表格样式及代码大全(全)
普通table表格样式及代码大全(全)(一) 单实线边框表格 <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#00 ...
- 美丽的表格样式(使用CSS样式表控制表格样式)
按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...
- 漂亮的表格样式(使用CSS样式表控制表格样式)
根据WEB2.0风格,设计了几个表格样式,我希望你喜欢. WEB2.0推广使用div开放式布局.但并不是完全放弃使用形式,在数据表现形式而言是一个不错的选择. 本节将介绍如何使用现在CSS样式表来控制 ...
- Bootstrap表格样式(附源码文件)--Bootstrap
1.表格默认样式 <h4>表格默认样式</h4><table><!--默认样式--> <tr><th>序号</th> ...
- word建立统一的表格样式
插入一个表格,一般border都是一样粗细,不美观, 这里推荐一种样式如下图(外框和首行都加粗,比较好看) 设置方法: 1.选中表格,上方出现设计选项卡 2.表格样式,点击"新建样式表&qu ...
- Bootstrap -- 表格样式、表单布局
Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...
- 07. Matplotlib 3 |表格样式| 显示控制
1.表格样式创建 表格视觉样式:Dataframe.style → 返回pandas.Styler对象的属性,具有格式化和显示Dataframe的有用方法 样式创建:① Styler.applymap ...
- 黑白表格样式教师求职简历免费word模板
10款精黑白表格样式教师求职简历免费word模板,也可用于其他专业和职业,个人免费简历模板,个人简历表免费,个人简历表格. 声明:该简历模板仅用于个人欣赏使用,请勿用于商业用途,谢谢. 下载地址:百度 ...
随机推荐
- python应用（7）：输入与输出
如前文,流程是程序的主角,而流程一般都需要处理数据,那数据如何进到流程,而最终处理后的数据又如何表现,这就是流程的输入与输出的问题. 本文介绍流程处理的数据的输入与输出. 流程中的输入,一般都会先保存 ...
- C#：终于有人把 ValueTask、IValueTaskSource、ManualResetValueTaskSourceCore 说清楚了！
目录 1,可用版本与参考资料 2,ValueTask 和 Task 3,编译器如何编译 4,ValueTask 有什么优势 5,ValueTask 创建异步任务 6,IValueTaskSource ...
- day1(Django)
1,web项目工作流程 1.1 了解web程序工作流程 1.2 django生命周期 2,django介绍 目的:了解Django框架的作用和特点作用: 简便.快速的开发数据库驱动的网站 Djan ...
- socket阻塞与非阻塞，同步与异步，select，pool，epool
概念理解 一.与I/O相关的五个重要概念 1. 第一个概念:用户空间与内核空间 1. 现在操作系统都是采用虚拟存储器,那么对32位操作系统而言,它的寻址空间(虚拟存储空间)为4G(2的32次方) 2. ...
- PyQt(Python+Qt)学习随笔：使用QColorDialog.getColor交互设置部件的颜色
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 PyQt中的部件只要是QWidget的派生类都可以在Designer或 ...
- PyQt（Python+Qt）学习随笔：QScrollArea滚动区域的alignment属性
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 滚动区域的alignment属性对应QScrollArea的alignment属性,用于控制滚动区域 ...
- 问题：PyCharm的几种调试方法的区别
关于PyCharm的调试方式,step into.step over.step out.run to cursor.resume programe与c语言相关的调试器功能基本相同,但PyCharm提供 ...
- 第二章、PyQt5应用构建详细过程介绍
老猿Python博文目录 老猿Python博客地址 一.引言 在上节<第一章.PyQt的简介.安装与配置>介绍了PyQt5及其安装和配置过程,本节将编写一个简单的PyQt5应用,介绍基本的 ...
- XSS漏洞防御之HttpOnly
WWW服务依赖于Http协议实现,Http是无状态的协议,所以为了在各个会话之间传递信息,就需要使用Cookie来标记访问者的状态,以便服务器端识别用户信息. Cookie分为内存Cookie和硬盘C ...
- 第 7 篇 Scrum 冲刺博客
每天举行会议 会议照片: 昨天已完成的工作与今天计划完成的工作及工作中遇到的困难: 成员姓名 昨天完成工作 今天计划完成的工作 工作中遇到的困难 蔡双浩 补充注释,初步查找bug 修改bug 无 陈创 ...