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

标题在表格右方

 

相关文章
|
5月前
|
JavaScript 前端开发 开发者
Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
本文详细介绍了Vue中动态添加HTML元素的使用方法与组件封装技巧。内容涵盖条件渲染(v-if/v-show)、列表渲染(v-for)、动态组件(:is)、手动操作DOM及动态创建组件实例等核心方法。同时,通过动态表单、弹窗组件和动态加载组件的封装示例,展示如何提升代码复用性和可维护性。最后,总结性能优化策略与注意事项,如批量更新DOM、懒加载大型组件及避免直接操作DOM等,帮助开发者在实际项目中灵活应用Vue动态元素管理功能。
123 15
|
18天前
|
XML 前端开发 C#
C#编程实践:解析HTML文档并执行元素匹配
通过上述步骤,可以在C#中有效地解析HTML文档并执行元素匹配。HtmlAgilityPack提供了一个强大而灵活的工具集,可以处理各种HTML解析任务。
101 19
|
4月前
|
移动开发 前端开发 JavaScript
HTML表单验证:确认input元素输入为具有特定整数和小数位数的数值。
将上述JavaScript代码与HTML一同使用,便可以确保用户输入的数值符合特定的格式要求。特别要注意,在实际的生产环境中,仅仅依靠前端验证是不够的。为了安全起见,后端也应该实施相应的验证措施,以防止不匹配格式的数据通过其他手段提交到服务器。
272 74
|
9月前
|
存储 数据采集 JSON
你知道吗?html_table可以提取的不止是表格
`html_table` 是一种强大的工具,不仅用于HTML表格解析,还在现代爬虫技术中发挥重要作用。它可以提取、整合、分析和传输多种类型的关键数据。本文从四个方面探讨其功能:关键数据提取(如财经网站的股票信息)、零散信息整合(如电商网站的产品详情)、数据对比分析(如手机性能参数对比)和数据存储与传输(如转换为CSV/JSON格式)。通过Python代码示例,展示了如何利用代理IP、多线程和自定义请求头提高爬虫效率,实现对复杂网页数据的全面抓取和利用。
305 12
你知道吗?html_table可以提取的不止是表格
|
5月前
|
JavaScript 前端开发 开发者
Vue 动态添加 HTML 元素组件封装使用方法及长尾关键词优化指南
本文详细介绍了Vue中动态添加HTML元素的多种方法与组件封装技巧,涵盖条件渲染(v-if/v-show)、列表渲染(v-for)、动态组件(:is)、手动DOM操作及动态创建组件实例等内容。同时提供了性能优化建议,如批量更新DOM、使用v-show代替v-if以及懒加载大型组件等。通过合理封装组件,可提高代码复用性和维护性。文中还附有具体示例代码,帮助开发者更好地理解和应用相关技术。适用于前端开发人员学习和实践Vue动态元素处理与组件设计。
132 19
|
5月前
|
缓存 JavaScript 前端开发
Vue 项目中动态添加 HTML 元素的方法与实践
本文探讨了 Vue 中动态添加 HTML 元素的多种技术方案,包括条件渲染(v-if/v-show)、动态组件(component :is)、手动挂载($mount)及 Vuex 状态管理等方法。通过实例分析,如动态表单生成器与全局模态框服务,展示了这些方案在实际开发中的应用。同时提供了性能优化建议和注意事项,帮助开发者根据需求选择最佳方式,在保持 Vue 响应式特性的同时实现灵活交互。附带代码示例,便于理解和实践。
129 2
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
574 0
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
|
前端开发
探索HTML表格的奥秘:学会使用 <table>标签创建精美表格
探索HTML表格的奥秘:学会使用 <table>标签创建精美表格
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5+CSS3+JS逆向前置——HTML2、table表格标签
139 0

热门文章

最新文章