美文网首页
HTML——表格

HTML——表格

作者: qin7zhen | 来源:发表于2016-12-06 21:30 被阅读50次

表格的标签

  • <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

相关文章