当前位置：文档之家 › html表格设置

html表格设置

  • 格式：doc
  • 大小：38.50 KB
  • 文档页数：3

html表格设置
容
表格的定义
定义表格 ：

……

定义表行：
定义单元格：
表格边框的宽度：BORDER=边框宽度，边框宽度为象素值
【使用范例】：定义一个一行一列的表格


第一列

定义了一个一行一列的表格，表格内容为：“第一列” 。
【使用范例】：定义一个一行两列的表格


第一列第二列

定义了一个一行两列的表格，表格第一列的内容为：“第一列” ，
表格第二列的内容为：“第二列”。
【使用范例】：定义一个两行一列的表格



第一行
第二行

定义了一个两行一列的表格，表格第一列的内容为：“第一列” ，
表格第二列的内容为：“第二列”

【使用范例】：定义一个两行两列的表格




第一行第一列第一行第二列
第二行第一列第二行第二列

要定义多行多列表格依次类推。
二、表格的基本用法
1、table标签的参数
表格边框的宽度：BORDER=边框宽度，边框宽度为象素值
单元格之间的空白距离 Cellspacing
单元格内部的空白距离 Cellpadding
表格宽度 Width
表格高度 Height
【使用范例】：设置表格边框宽度为5，高度为80，宽度为200，单
元格内部之间距离为2，单元格之间距离为2

width=200 cellspacing=2 cellpadding=2>

2、表格的色彩
表格的色彩也在

标签里设置，参数有：
背景颜色 bgcolor=#rrggbb
边框颜色 bordercolor=#rrggbb
立体边框亮色 bordercolorlight=#rrggbb
立体边框暗色 bordercolordark=#rrggbb
【使用范例】：已有一个一行三列的表格，现在需要设定表格背景颜
色为＃00aabb，边框颜色＃00ff00,立体边框亮色为＃ff0000,立体边
框暗色为#0000ff.
border=5 bgcolor=#ccaabb bordercolor=#00ff00 bordercolorlight=
#ff0000 bordercolordark=#0000ff >

第一行第一列第一行第
二列		第一行第三列

3、单元格的对齐方式
（1）语法：
其中＃可以设定的参数有：
横向居左 left
横向居中 center
横向居右 right
【使用范例】：已有一个一行三列的表格，现在需要设定表格三个单
元格的内容对齐方式分别是横向居左，横向居中，横向居右

第一行第一列第一行第二
列		第一行第三列

（2）语法：
其中＃可以设定的参数有：
纵向居顶 top
纵向居中 middle
纵向居底 bottom
【使用范例】：已有一个一行三列的表格，现在需要设定表格三个单
元格的内容对齐方式分别是纵向居顶，纵向居中，纵向居底

第一行第一列第一行第
二列		第一行第三列

合集下载

htmltab表格树形结构

htmltab表格树形结构

htmltab表格树形结构HTML表格是一种用于展示和组织数据的常用结构。

在这个回答中，我将向您介绍如何使用HTML标记创建一个具有树形结构的Tab表格。

我将包括一些可以帮助您理解的示例代码和说明。

以下是一个超过1200字的教程：首先，我们需要一个基本的HTML结构。

在HTML文件的```<head>```标记中，我们使用```<style>```标记来定义CSS样式，使表格看起来更整齐和易读。

在```<body>```标记中，我们创建了一个```<table>```标记作为整个表格的容器。

```html<!DOCTYPE html><html><head><title>Tree-like Tab Table</title><style>tableborder-collapse: collapse;}tdpadding: 10px;border: 1px solid black;}.level-1background-color: lightblue; }.level-2background-color: lightgreen; }.level-3background-color: lightyellow; }</style></head><body><table><tr><th>项目</th><th>细节</th><th>注意事项</th></tr><!--在这里创建表格行--></table></body></html>```接下来，我们将在表格中创建行并使用嵌套的```<table>```标记来模拟树状结构。

HTML5表格详细教程

HTML5表格详细教程

HTML5表格详细教程HTML5表格⽂章⽬录HTML5表格5.1 定义表格5.1.1 普通表格、列标题5.1.2 表格标题5.1.3 表格⾏分组、表格列分组5.2 表格属性5.2.1 单线表格、分离单元格5.2.2 细线边框5.3 单元格属性5.3.1 跨单元格显⽰、表头单元格5.3.2 绑定表头、信息缩写5.3.3 单元格分类5.4 项⽬实战5.4.2 设计产品信息列表5.1 定义表格5.1.1 普通表格、列标题普通表格⼀个< table >元素，以及⼀个或多个 tr 和 td 组成，tr 定义⾏，td 定义⾏内单元格。

<table><tr><td>⽉落乌啼霜满天，</td><td>江枫渔⽕对愁眠。

</td></tr><tr><td>姑苏城外寒⼭寺，</td><td>夜半钟声到客船。

</td></tr></table>列标题在数据表格中，每列应该包含⼀个标题。

在数据库中这个标题称为字段，在HTML中被称为表头单元格。

使⽤ th 元素定义表头单元格。

默认状态下，th 内⽂本呈现为居中、粗体显⽰，⽽td 内⽂本为左对齐的普通⽂本。

<!doctype html><table><tr><th>⽤户名</th><th>电⼦邮箱</th></tr><tr><td>张三</td><td>zhangsan@</td></tr></table><table><tr><th>&nbsp;</th><th>星期⼀</th><th>星期⼆</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><tr><th>第1节</th><td>语⽂</td><td>物理</td><td>数学</td><td>语⽂</td><td>美术</td></tr><tr><th>第2节</th><td>数学</td><td>语⽂</td><td>体育</td><td>英语</td><td>⾳乐</td><th>第3节</th><td>语⽂</td><td>体育</td><td>数学</td><td>英语</td><td>地理</td></tr><tr><th>第4节</th><td>地理</td><td>化学</td><td>语⽂</td><td>语⽂</td><td>美术</td></tr></table>5.1.2 表格标题< caption > 标签定义表格标题。

《HTML页面与表格》PPT课件

《HTML页面与表格》PPT课件


HTML文档
• HTML页面的基本结构 • 起始标记 • 文件头
襄樊1软22 0件2学1/院4/23
你的潜力，我们的动力！
HTML页面的基本结构
基本结构
起始标记 网页标题
文件主体
<Html> <Head> 网页的标题和属性 </Head> <Body> 文件主体 </Body>
</Html>
襄樊1软23 0件2学1/院4/23
原理： 在欲链接处做个记号 链接时就寻找个这记号
▪ 内部链接就是网页中的书签
格式
<a Name=”书签名称”>书签内容</a>
襄樊2软21 0件2学1/院4/23
你的潜力，我们的动力！
内部链接实例
例如，先定义一个标签a，然后找到“标 签名”这个标签，就可编写如下代码：
<a name=”标签a”>书签内容</a> <a Href=”#标签a”>单击此处监视浏览器调到“标签a”处</a>
你的潜力，我们的动力！
网页基础知识
统一资源定位器——URL （Uniform Resource Locator）
• URL包括传送协议，服务器名称、文件的完整路径 例如：/index.html 其中http://是传送协议 是服务器名称 index.html 是文件的完整路径
</Body>
襄樊2软26 0件2学1/院4/23
你的潜力，我们的动力！
有通栏的表格
1．有横向通栏的表格用<td colspan=#>属性说 明
以像素为单位 #代表通栏占据的网格数
HTML给table添加单线边框

HTML给table添加单线边框

HTML给table添加单线边框⼀般来说，给表格加边框都会出现不同的问题，以下是给表格加边框后展现⽐较好的⽅式<style>table,table tr th, table tr td { border:1px solid #0094ff; }table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}</style><table><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr></table>但是根据不同的需要有时候我们需要不同的样式，在这⾥我就影响表格边框的因素，做⼀些总结和分析⼀、 <table border="1"> 表格边框如图：，也就是border=1，意思就是给表格的每⼀格，及边框加上1像素的边框⼆、 <table border="1" cellspacing="0"> cellspacing单元格间距如图：这时表格⼤⼩为：200*118px三、<table border="1" cellspacing="0" cellpadding="0"> cellpadding单元格边距如图：这时表格⼤⼩为：200*110px四、去掉表格中table的所有属性值，当在css中给table设置{border: 1px solid #151515}如图：这个时候我们发现，css中的border其实就是给表格加了⼀个外边框⽽已五、border-collapse: collapse 边框合并，该属性设置表格的边框是否被合并为⼀个单⼀的边框，还是象在标准的 HTML 中那样分开显⽰这个时候如果我们只是想给表格整体加边框，并且不需要边距和间距，其实我们只需要这么写：<style>table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-color:#b6ff00; border-collapse: collapse;}</style><table border="1"><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr></table>如图：（Google）（firefox）六、我们在上⾯的图中可以清晰看见，两个浏览器所解析边框不同。