HTML标记语法之表格元素

简介: 语法与语义:   和定义表格的开始和结束   和定义表格头部的开始和结束   和定义表格主体开始和结束   和定义表格脚注的开始和结束   和定义表行的开始和结束   和定义表列(单元格)的开始和结束   定义标题栏,和级别相同(文字加粗、居中)。
语法与语义:
  <table>和</table>定义表格的开始和结束
  <thead>和</thead>定义表格头部的开始和结束
  <tbody>和</tbody>定义表格主体开始和结束
  <tfoot>和</tfoot>定义表格脚注的开始和结束
  <tr>和</tr>定义表行的开始和结束
  <td>和</td>定义表列(单元格)的开始和结束
  <th></th>定义标题栏,和<td>级别相同(文字加粗、居中)。
1.table的属性集
属性 作用
bgcolor 设置表格背景色
background 设置表格背景图片
border 设置边框宽度,默认为0
cellpadding 设置单元格与内容之间的距离,默认值为2
cellspacing 设置单元格之间的距离,默认值为2
bodercolor 设置边框颜色
bodercolorlight 置边框亮部分的颜色(boder大于等于1时有效)
bodercolordark 设置边框暗部分的颜色(boder大于等于1时才有效)
align 设置表格对齐格式(left、center、right)
width 设置表格宽度,单位用绝对像素和百分比
height 设置表格高度,单位用绝对像素和百分比
2.tr的属性集
属性 作用
width 设置行宽度
height 设置行高度
bgcolor 设置行的背景颜色
align 设置水平对齐方式(left/right/center)
valign 设置行垂直对齐方式(top、middle、bottom)
3.td的属性集
属性 作用
width 设置单元格宽度
height 设置单元格高度
bgcolor 设置单元格的背景颜色
background background
align 设置水平对齐方式(left/right/center)
valign 设置行垂直对齐方式(top、middle、bottom)
rowspan 设置行合并数目
colspan 设置列合并数目
nowarp 设置在单元格中不换行

4.立体表格实现原理

    表格的亮边框和暗边框颜色进行对比。

5.细线表格效果的实现原理

    1.将表格的boder设为0.

    2.给表格设置背景颜色为细线颜色

    3.給表格设置单元格背景为白色

    4.給表格设置单元格之间的距离为细线宽度

6.table的边框设置及其效果

属性名称 属性值 说明

frame(border>0)

       
void 不显现表格的边线
above 只显现表格上边线
below 只显现表格下边线
hsides 只显现表格上下边线
vsides 只显现表格左右边线
lhs 只显现表格的左边线
vhs 只显现表格的右边线
border/box 显现表格的所有边线
rules     rows 只显示横行的格框线
cols 只显示直行的格框线
all 显示所有的格框线
groups 表示列组合水平部分
none 不显示任何格框线

7.表格结构化格式

  <table>

    <thead>表头区</thead>

    <tbody>表体区</tbody>

    <tfoot>表尾区</tfoot>

  </table>

8.直列化格式:<colgroup><colgroup><col><colgroup>的功能完全一样)

 

属性名称

属性值

说明

          align

left

靠左

center

靠中

right

靠右

     valign

top

靠上

middle

靠中

bottom

靠下

span

数字

直列数

bgcolor

颜色

背景颜色

  

  例如:想把一个表格的第n列的颜色改变,可以这样做:

    <colgroup span=”n-1”></colgroup>        

    <colgroup bgcolor=”你想的颜色”></colgroup>

9.表格的标题:

  <table>

    <caption>标题名</caption>

  </table>

 

属性名称

属性值

说明

align

top

标题在表格上方

bottom

标题在表格下方

left

标题在表格左方

right

标题在表格右方

 

相关文章
|
7天前
|
前端开发
html中行内元素、块级元素、行内快元素都有哪些,以及区别
html中行内元素、块级元素、行内快元素都有哪些,以及区别
18 1
|
11天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
13天前
|
移动开发 JavaScript 前端开发
【专栏:HTML进阶篇】HTML模板与Web组件:可复用的网页元素
【4月更文挑战第30天】HTML模板和Web组件提升网页开发效率和可维护性。HTML模板,如&lt;template&gt;元素和服务器端模板引擎,用于创建可复用的HTML结构。Web组件是自定义的HTML元素,结合影子DOM和模板,实现封装的可重用组件。两者助力构建高效、现代的网页和网站。
|
13天前
|
前端开发 JavaScript UED
【专栏:HTML基础篇】HTML列表与表格:展示数据的两种方式
【4月更文挑战第30天】本文探讨了HTML中的列表和表格两种元素在网页设计中的重要性。无序列表(`&lt;ul&gt;`)和有序列表(`&lt;ol&gt;`)用于呈现相关项目,前者常用于导航菜单,后者适合有序信息。表格(`&lt;table&gt;`)用于展示结构化数据,通过`&lt;tr&gt;`、`&lt;td&gt;`和`&lt;th&gt;`定义行和单元格。尽管简单,列表和表格在内容呈现和用户体验上起着关键作用。然而,响应式设计趋势下,表格可能被更灵活的布局替代,复杂数据展示则可借助JavaScript库提升交互性。正确使用这些基础元素能有效组织信息,创建优质网页。
|
13天前
|
移动开发 前端开发 JavaScript
【专栏:HTML基础篇】深入HTML元素:理解结构与内容
【4月更文挑战第30天】本文探讨了HTML在构建网页中的核心作用,HTML元素构成网页结构与内容,包括`&lt;!DOCTYPE html&gt;`、`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`等基本元素及`&lt;div&gt;`、`&lt;span&gt;`、`&lt;a&gt;`、`&lt;img&gt;`等丰富标签。理解并恰当使用这些元素能创建清晰结构、优化SEO、增强交互性,并实现语义化,为打造功能强大且美观的网站奠定基础。进一步学习CSS和JavaScript将提升网页视觉效果和互动性。
|
14天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)
|
18天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
20 1
|
25天前
|
前端开发
《HTML 简易速速上手小册》第3章:HTML 的列表与表格(2024 最新版)
《HTML 简易速速上手小册》第3章:HTML 的列表与表格(2024 最新版)
17 0
|
25天前
|
搜索推荐
《HTML 简易速速上手小册》第2章:HTML 的标签和元素(2024 最新版)
《HTML 简易速速上手小册》第2章:HTML 的标签和元素(2024 最新版)
25 0
《HTML 简易速速上手小册》第2章:HTML 的标签和元素(2024 最新版)