整合营销服务商

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

免费咨询热线:

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,我们一起飞!

一个 HTML 文本区域:

<textarea rows="10" cols="30">

我是一个文本框。

</textarea>


浏览器支持

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


标签定义及使用说明

<textarea> 标签定义一个多行的文本输入控件。

文本区域中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小,不过更好的办法是使用 CSS 的 height 和 width 属性。


HTML 4.01 与 HTML5之间的差异

HTML5 增加了一些新的属性。


属性

New:HTML5 中的新属性。

属性描述
autofocusNewautofocus规定当页面加载时,文本区域自动获得焦点。
colsnumber规定文本区域内可见的列数。
disableddisabled规定禁用文本区域。
formNewform_id定义文本区域所属的一个或多个表单。
maxlengthNewnumber规定文本区域允许的最大字符数。
nametext规定文本区域的名称。
placeholderNewtext规定一个简短的提示,描述文本区域期望的输入值。
readonlyreadonly规定文本区域为只读。
requiredNewrequired规定文本区域是必需的/必填的。
rowsnumber规定文本区域内可见的行数。
wrapNewhardsoft规定当提交表单时,文本区域中的文本应该怎样换行。

全局属性

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


事件属性

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

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

格语法:

注意:颜色使用格式有三种:rgb(x,x,x) #xxxxxx colorname

<table width=""></table>指定表格的宽度大小(使用数字pixel或%)

<table border=""></table>设定表格边框大小(使用数字pixel)

<table align=""></table>表格位置,置左,为默认值

align属性:left(左对齐表格,默认值)、right(右对齐表格)、center(居中对齐表格)

<table bgcolor=""></table>设定表格的背景颜色

<table cellpadding=""></table>指定内容与网格线之间的间距(使用数字pixel或%)

<table cellspacing=""></table>指定网格线与网格线之间的距离(使用数字pixel或%)

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

通常表格, 这两个参数都设置为 0 。

<table rules="rows"></table>规定内侧边框的哪个部分是可见的。(兼容性差)

rules属性:none 没有线条。

groups 位于行组和列组之间的线条。

rows 位于行之间的线条。

cols 位于列之间的线条。

all 位于行和列之间的线条。


<table summary="Monthly savings for the Flintstones family"></table>

定义了表格内容的摘要:

表格结构:

在使用表格进行布局时, 可以将表格划分为头部、主体和页脚, 具体如下所示:

<thead></thead>:用于定义表格的头部, 必须位于<table></table>标记中, 一般包含网页的logo和导航等头部信息。

<tfoot></tfoot>:用于定义表格的页脚, 位于<table></table>标记中<thead></thead>标记之后, 一般包含网页底部的企业信息等。

<tbody></tbody>:用于定义表格的主体, 位于<table></table>标记中<tfoot></tfoot>标记之后, 一般包含网页中除头部和底部之外的其他内容。

注意:在没有<tbody></tbody>比较的情况下, 浏览器会自动添加<tbody></tbody>标记。

<table bordercolor=""></table>设定表格边框的颜色

<table cols=""></table>指定表格的栏数

<table height=""></table>指定表格的高度大小(使用数字)

<table background=""></table>背景图片的URL=就是路径网址(默认是repeat:水平和垂直方向重复)

<table bordercolordark=""></table>设定表格暗边框的颜色

<table bordercolorlight=""></table>设定表格亮边框的颜色

<tr align=""></tr> 定义表格行的内容对齐方式。

align属性值:right、left、center、justify、char

<tr bgcolor=""></tr> 规定表格行的背景颜色。

<tr valign=""></tr> 规定表格行中内容的垂直对齐方式。

valign属性值right、left、center、justify、char

<td colspan=""></td>指定储存格合并栏的栏数(使用数字)

<td rowspan=""></td>指定储存格合并列的列数(使用数字)

<td align=""></td> 调整表格字段之左右对齐

<td bgcolor=""></td> 设定表格字段之背景颜色

<td colspan="" rowspan=""></td> 表格字段的合并

<td valign=""></td> 调整表格字段之上下对齐

<td width=""></td> 调整表格字段宽度

<td nowrap="nowrap"></td> 规定表格单元格中的内容不换行(注意只有一个值:nowrap)

<caption></caption>为表格加上标题

<caption align="">设定表格标题位置

align属性:left, center(默认值), right

<th></th> 定义表头(粗体居中)

细表格边框

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="158" height="68">
<tr>
<td width="158" height="68"></td>
</tr>
</table>

表格创建后浏览器会自动添加<tbody>标签