HTML——表格

表格的标签

  • <table>:表格由<table>标签来定义。
  • <tr>: 每个表格均有若干行,由 <tr> 标签定义。
  • <td>: 表格内,每行被分割为若干单元格,各单元格的内容由标签 <td>定义。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
  • <th>: 表格的表头由<th> 标签定义。字体默认为粗体居中。
  • <caption>:定义表格唯一的标题。该标签必须紧随 table 标签之后。标题默认居中于表格之上。
  • <col>:为表格中一个或多个列定义属性值。
  • <colgroup>: 对表格中的多列进行格式化。
  • <thead>,<tbody>,<tfoot>

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

表格的外观标签

  1. 边框
    默认为不显示表格边框。
<table border="1">
  • 单元格边距(Cell padding)
    单元格内容与其边框之间的空白距离。
<table cellpadding="10">
  • 单元格间距(Cell spacing)
    单元格之间的距离。
<table cellspacing="10">
  • 背景
    整个表格背景颜色和背景图片。
<table bgcolor="red" background="/i/eg_bg_07.gif">

单个单元格的背景颜色和背景图片。

<td bgcolor="red">First</td>

跨行或跨列的表格单元格

  • 跨列:
<th colspan="2"> 
  跨两列
</th>
  • 跨行:
<th rowspan="2"> 
  跨两行
</th>

表格示例


该示例中需要应用到上述的标题<caption>、跨列<colspan>、跨行<rolspan>、边框<border>等标签。
代码 Github

Reference

http://www.w3school.com.cn/html/html_tables.asp

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2017-09-07摘抄自W3school-HTML 表格希望帮助自己系统地打好基础,也能在做笔记的同时添加一些自...
    moralok阅读 358评论 0 0
  • 1、表格和边框属性 2、表格的表头 3、表格中的空单元格 4、表格的标题 5、跨行和跨列的单元格 6、表格内的标签...
    WILD_POINTER阅读 395评论 0 0
  • Druid是一个JDBC组件,它包括三部分: 1.DruidDriver 代理Driver,能够提供基于Filte...
    意识流丶阅读 12,981评论 0 6
  • 蚂蚁借呗,相信大家早已不陌生。蚂蚁借呗最高额度从原来的20万已经调整到现在的最高30万,借呗再次开启全面提...
    墨雪青心阅读 11,453评论 2 4
  •   项目名称定好后,一般不会再去修改。但是有时会因为某些原因,我们需要去修改项目的名称。参考: iOS 更改xco...
    西叶lv阅读 229评论 0 0