21xrx.com
登录
  

HTML 表格

上一章 下一章

HTML表格例子

数字名字分数
1小明80
2小花81.2
3小刘70
4小黑90

定义HTML表格

例子

样例解释:

<table>标签定义表格

<tr>标签把表格分成很多行

<td>标签把每行分成很多列

一个表格行也可以用<th>标签划分成表头

<td>标签是用来装数据的.但也可以装HTML元素,像文字,图片,列表等等.

HTML 有边框的表格

如果不明确指定边框,边框是不会显示的.

可以用border属性添加边框.

例子

border属性是基于HTML标准的,比用CSS来的好.

添加边框,用CSS border属性:

例子

记住边框是添加给表和单元格的.

HTML表格,折叠的边框

如果你想添加折叠的边框,用CSS的border-collapse属性.

例子

HTML 表格,单元格边距

单元格边距是指单元格里面的内容和边框之间的距离.

如果你不指定边距,表格将不显示边距.

要设置边距属性,用CSSpadding属性

例子

HTML 表格的表头

表头用<th>标签定义.

默认情况下,所有的主流浏览器都是以加粗和居中来显示表头的.

例子

表头左边对齐用CSStext-align属性

带有边距的表格

指定单元格与单元格之间的距离.

CSSborder-spacing属性指定表格的边距.

如果表格折叠(collapse)边框,border-spacing将无效 .

合并多列表格单元格

用colspan属性合并多列

例子

表格行合并

rowspan属性合并多行

例子

HTML 带有标题的表格

<caption>标签给表格添加标题

例子

    <caption>标签必须在<table>标签之后.

给表格添加特殊样式

要给指定表格添加指定样式用id属性来标识.

现在你可以给这个表格定义特殊的样式了.
添加更多的样式.

本章总结

  • HTML <table>元素定义表格
  • HTML <tr>元素定义表格行
  • HTML <td>元素定义列
  • HTML <th>元素定义表头
  • HTML <caption>元素定义表格的标题
  • CSSborder属性定义边框
  • CSSborder-collapse属性折叠所有的表格边框
  • CSSpadding属性给单元格添加内边距
  • CSStext-align属性来对齐单元格里的内容
  • CSSborder-spacing属性设置单元格与单元格之间的间距
  • colspan属性合并多列
  • rowspan属性合并多行
  • id属性唯一标识表

HTML 关于表的标签

标签描述
<table>定义一张表
<th>定义表的表头
<tr>定义表的行
<td>定义表的单元格
<caption>定义表的标题
<colgroup>定义表中的多列为一组进行格式化
<col>在<colgroup>元素里指定每列的列属性
<thead>表的表头内容
<tbody>表的主体内容
<tfoot>表的表尾内容
  
  

评论区

{{item['qq_nickname']}}
()
回复
回复
21技术    www.21xrx.com 备案号:蜀ICP备17043188号-2