表格

  • 表格

代码:

<table>
<tr>
<td>内容</td>
</tr>
</table>

  • table常用属性:
    width:
    height:
    border:设定表格的边框线,其实会应用整个表格的所有“边框线”(每个单元格)
    cellpadding: 设定单元格中的内容与单元格的边框线之间的“间距”,单位是px
    cellspacing: 设定相邻的两个元格的边框线之间的“间距”,单位是px
    bgcolor=”yellow” 设定表格的总体上的背景颜色
    background=“图片地址 url”:设定表格总体的背景
        align=”left // center // right”: 设定表格总体上的定位方式td
  • td常用属性:
    width:
    height:
    bgcolor=”yellow” 设定表格的总体上的背景颜色
    background=“图片地址 url”:设定表格总体的背景图
    align=”left // center // right”: 设定表格总体上的定位方式
    valign=”top // middle // bottom”: 设定单元格中的内容的垂直对齐方式
  • (合并单元格)
    colspan=”5”: 表示该单元格会水平向右边合并5个“原始单元格”,其本身相当于“跨”5个列。
    rowspan=”3”: 表示该单元格会垂直向下边合并3个“原始单元格”,其本身相当于“跨”3个行

tr的属性:不多,也不常用
表格深入
td用于设定一个普通单元格
th用于设定一个“标题单元格”:其中的文字会自动粗体并居中——凡是可以用td,就可以用th

一个表格还可以设定一个“标题”:在table 中使用caption标签,其中可是设定标题文字

实际上,作为表格“table”,其内部的所有行还可以进一步进行“表格区域划分”,通常有3种形式的表格区域:
thead:代表表格的“头部”区域,其中可以放置tr(及其下属)标签。
tbody:代表表格的“中部”区域(主体区域),同样可以放tr——所有没有明确使用分区标签归到某个区域的tr标签,都自动隶属于tbody分区。——也就是说,tbody有可能自动出现。
tfoot:代表表格的“尾部”区域,同样可以放tr。
表格深入
td用于设定一个普通单元格
th用于设定一个“标题单元格”:其中的文字会自动粗体并居中——凡是可以用td,就可以用th

一个表格还可以设定一个“标题”:在table 中使用caption标签,其中可是设定标题文字

实际上,作为表格“table”,其内部的所有行还可以进一步进行“表格区域划分”,通常有3种形式的表格区域:
thead:代表表格的“头部”区域,其中可以放置tr(及其下属)标签。
tbody:代表表格的“中部”区域(主体区域),同样可以放tr——所有没有明确使用分区标签归到某个区域的tr标签,都自动隶属于tbody分区。——也就是说,tbody有可能自动出现。
tfoot:代表表格的“尾部”区域,同样可以放tr。

  • 表格深入

td用于设定一个普通单元格
th用于设定一个“标题单元格”:其中的文字会自动粗体并居中——凡是可以用td,就可以用th

一个表格还可以设定一个“标题”:在table 中使用caption标签,其中可是设定标题文字

实际上,作为表格“table”,其内部的所有行还可以进一步进行“表格区域划分”,通常有3种形式的表格区域:
thead:代表表格的“头部”区域,其中可以放置tr(及其下属)标签。
tbody:代表表格的“中部”区域(主体区域),同样可以放tr——所有没有明确使用分区标签归到某个区域的tr标签,都自动隶属于tbody分区。——也就是说,tbody有可能自动出现。
tfoot:代表表格的“尾部”区域,同样可以放tr。

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

推荐阅读更多精彩内容