专栏首页Java后端技术HTML标记语法之表格元素

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

标题在表格右方

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 解决Java程序连接mysql数据库出现CommunicationsException: Communications link failure错误的问题

      最近在家里捣鼓一个公司自己搭建的demo的时候,发现程序一启动就会出现CommunicationsException: Communications lin...

    阿豪聊干货
  • Meta标签实现阻止移动设备(手机、Pad)的浏览器双击放大网页

      在当今这个移动设备发展越来越快,并且技术越来越成熟的时代,移动设备成了企业扩展业务不可或缺的重要领域之一,随之而来的是适应手机的网站层出不穷,在开发过程中,...

    阿豪聊干货
  • 解决svn迁移过程中出现:SVN Error: is not the same repository as的问题

      由于公司业务的需要,新购买了一批机器,那么面临着的就是svn等一系列东西进行迁移的问题,在svn迁移以后,本地的svn代码在切换时出现了SVN Error:...

    阿豪聊干货
  • H5 学习从0到1-H5表格(7)

    一墨编程学习
  • Hyperledger Fabric与其他块链实现有何不同?

    [表格]

    首席架构师智库
  • 世界著名期刊杂志里的表格样式

    我自己制作过不少糟糕的表格,也见过更多不规范的表格样式,其不专业的形态有很多种,不一而足。整体上看,这些不规范的表格,主要表现为结构混乱、逻辑不清以及外观粗糙。

    Lenis
  • 正确的表格跨页,你会吗?

    Word是我们平日里最常用的Office软件,大家都已经很熟悉了。小编最近一直在整理毕业的东西,其中关于word里面的表格,就被导师指出了问题。我们都知道,如果...

    百味科研芝士
  • 网页|HTML表格制作

    在我们学习工作想要做出一个表格的时候,我们通常会直接打开Excel,但其实,使用html进行表格制作时,更能体会到敲代码的魅力。

    算法与编程之美
  • HTML|利用CSS美化一个html表格

    我们通常做一个表格的时候,会发现表格是左上对齐的,且表格看起来非常单调,整个页面也很简洁。我们以为表格都应该是这个样子的吗?其实不然,表格也可以在网页中体现得很...

    算法与编程之美
  • 为什么歪果仁的Excel表格这么漂亮?

    兰色说:其实Excel漂亮并不意味着花梢,表格设计就是要突出和展示数据,达到这个目的,又能看上去很舒服。就是完美又好看的Excel表格。

    华章科技

扫码关注云+社区

领取腾讯云代金券