整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML 基础的<td> 标签

一个简单的 HTML 表格,带有两个单元格:

<table border="1">

<tr>

<td>Cell A</td>

<td>Cell B</td>

</tr>

</table>


浏览器支持

所有主流浏览器都支持 <td> 标签。


标签定义及使用说明

<td> 标签定义 HTML 表格中的标准单元格。

HTML 表格有两种单元格类型:

  • 表头单元格 - 包含头部信息(由 <th> 元素创建)

  • 标准单元格 - 包含数据(由 <td> 元素创建)

<th> 元素中的文本通常呈现为粗体并且居中。

<td> 元素中的文本通常是普通的左对齐文本。


提示和注释

提示:如果需要将内容横跨多个行或列,请使用 colspan 和 rowspan 属性!


HTML 4.01 与 HTML5之间的差异

HTML 5 中不再支持 HTML 4.01 中的某些属性。


属性

属性描述
abbrtextHTML5 不支持。规定单元格中内容的缩写版本。
alignleftrightcenterjustifycharHTML5 不支持。规定单元格内容的水平对齐方式。
axiscategory_nameHTML5 不支持。对单元格进行分类。
bgcolorrgb(x,x,x)#xxxxxxcolornameHTML5 不支持。HTML 4.01 已废弃。 规定单元格的背景颜色。
charcharacterHTML5 不支持。规定根据哪个字符来进行内容的对齐。
charoffnumberHTML5 不支持。规定对齐字符的偏移量。
colspannumber规定单元格可横跨的列数。
headersheader_id规定与单元格相关联的一个或多个表头单元格。
heightpixels%HTML5 不支持。HTML 4.01 已废弃。 设置单元格的高度。
nowrapnowrapHTML5 不支持。HTML 4.01 已废弃。 规定单元格中的内容是否折行。
rowspannumber设置单元格可横跨的行数。
scopecolcolgrouprowrowgroupHTML5 不支持。定义将表头单元格与数据单元格相关联的方法。
valigntopmiddlebottombaselineHTML5 不支持。规定单元格内容的垂直排列方式。
widthpixels%HTML5 不支持。HTML 4.01 已废弃。 规定单元格的宽度。

全局属性

<td> 标签支持 HTML 的全局属性。


事件属性

<td> 标签支持 HTML 的事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

格标签:

table 表格标签



熟悉表格常用的单词:
border 边距,align 格式 :‘ center’ 对齐,cellspacing 单元格与单元格的距离,cellpadding 单元格与内容的距离,wedth 宽度,height 高度,tr 表示:行,th 表示:表头,td :表示列

编辑表格:



生成表格:



<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>表格标签</title>

</head>

<body>

<table border="" cellspacing="" cellpadding="">

<tr>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

</tr>

<tr>

<td>张三</td>

<td>男</td>

<td>18</td>

</tr>


<tr>

<td>李四</td>

<td>男</td>

<td>19</td>


</tr>

<tr>

<td>王五</td>

<td>男</td>

<td>20</td>


</tr>

</table>

</table>

</body>

</html>

序列表和有序列表

用于呈现逻辑上并列的具有相关性的数据内容.

<ul>

<li></li>

</ul>

ul元素可以用type属性设置不同的列表标记:

disc: 实心圆点

circle: 空心圆圈

square: 实心正方形

<ol>

<li></li>

</ol>

ol元素也可以设置不同的标记:

1: 阿拉伯数字

i: 小写罗马数字

I: 大写罗马数字

A: 大写字母

a: 小写字母

定义列表

适用呈现包含主题及描述的数据内容.

<dl>

<dt>主题</dt>

<dd>描述</dd>

</dl>

表格

<table>

<thead>

<tr>

<th></th>

</tr>

</thead>

<tbody>

<tr>

<td></td>

</tr>

</tbody>

</table>

thead: 表头

tbody: 表体

tfoot: 表脚

th: 专用于表头中的单元格, 其具有自动加粗并且居中的效果.

表格的属性控制:

border: 边框

bordercolor: 边框颜色

width: 宽度

height: 高度

cellspacing: 单元格间距(外)

cellpadding: 单元格填充(内)

align: 表格的位置控制

单元格的属性控制:

align

valign

如何合并单元格/跨行或跨列?

<td rowspan="number" colspan="number">

注意: 合并后, 会引发单元格数量的减少!

列表练习案例源码:


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<h1>我的电脑文件列表</h1>

<ul>

<li>我的电脑

<ul>

<li>本地磁盘(C:)

<ul>

<li>我的文档</li>

<li>我的收藏</li>

</ul>

</li>

<li>本地磁盘(D:)

<ul>

<li>我的游戏</li>

<li>我的资料</li>

<li>我的电影</li>

</ul>

</li>

</ul>

</li>

</ul>

</body>

</html>