错误博客( cuowu.com )发布于 2019-06-04 22:19:21

HTML表格

<table><tr><td></td></tr></table>,HTML表格标签,table标签教程。

创建表格

用法:

<table><tr><td></td></tr></table>

<table></table>表格标记

<tr></tr>行标记 table row

<td></td>单元格标记

例如:

<table border=”1″>

<tr>

<td>姓名</td> <!—我是第一行第一个单元格–>

<td>性别</td> <!—我是第一行第二个单元格–>

<td>语文</td> <!—我是第一行第三个单元格–>

<td>数学</td> <!—我是第一行第四个单元格–>

</tr>

<tr>

<td>小明</td> <!—我是第二行第一个单元格–>

<td>男</td> <!—我是第二行第二个单元格–>

<td>80</td>

<td>80</td>

</tr>

<tr>

<td>小白</td>

<td>男</td>

<td>60</td>

<td>70</td>

</tr>

<tr>

<td>小花</td>

<td>女</td>

<td>89</td>

<td>100</td>

</tr>

</table>

表格的标题

用法:

<table> <caption>表格的标题</caption> </table>

规则:

写在<table>标签内,一般位于整个表格的第一行

例如:

<table border=”1″>

<caption>成绩单</caption>

<tr>

<td>姓名</td> <!—我是第一行第一个单元格–>

<td>性别</td> <!—我是第一行第二个单元格–>

<td>语文</td> <!—我是第一行第三个单元格–>

<td>数学</td> <!—我是第一行第四个单元格–>

</tr>

</table>

表头

用法:

<table><th></th></table>

<th>和<td>均为单元格标签,只是<th>一般位于表格的第一行

例如:

<table border=”1″>

<caption>成绩单</caption>

<tr>

<th>姓名</th> <!—我是第一行第一个单元格–>

<th>性别</th> <!—我是第一行第二个单元格–>

<th>语文</th> <!—我是第一行第三个单元格–>

<th>数学</th> <!—我是第一行第四个单元格–>

</tr>

<tr>

<td>小明</td> <!—我是第二行第一个单元格–>

<td>男</td> <!—我是第二行第二个单元格–>

<td>80</td>

<td>80</td>

</tr>

</table>

表格的属性

在HTML4.01中,<table>属性不赞成使用”align”和”bgcolor”。在HTML5中,不支持<table>标签的任何属性。

宽度和高度:<table width=”宽度” height=”高度” align=”对齐方式”></table>

宽高单位:可以为像素(PX)也可以是百分比。

对齐方式:left、center、right 即左中右。不赞成使用,请使用样式取代它。

例如:

<table border=”1″ width=”300″ height=”300″ align=”center”>

<caption>考试成绩单</caption>

<tr>

<th>姓名</th>

<th>性别</th>

<th>语文</th>

<th>数学</th>

</tr>

</table>

边框: <table border=”” bordercolor=””cellspacing=””cellpadding=””></table>

  • 边框宽度 <table border=”宽度”></table> 宽度单位一般为px
  • 边框颜色 <table bordercolor=”颜色”></table>
  • 内框宽度 <table cellspacing=”宽度”></table> 单元格之间的距离
  • 单元格内文字与边框间距 <table cellpadding></table>

例如:

<table border=”1″ bordercolor=”red” cellspacing=”10″ cellpadding=”10″>

<caption>考试成绩单</caption>

<tr>

<th>姓名</th>

<th>性别</th>

<th>语文</th>

<th>数学</th>

</tr>

<tr>

<td>小花</td>

<td>女</td>

<td>89</td>

<td>100</td>

</tr>

<tr>

<td>小花</td>

<td>女</td>

<td>89</td>

<td>100</td>

</tr>

</table>

背景:<table bgcolor=”背景颜色” background=”背景图片地址”>

  • 背景颜色<table bgcolor=”背景颜色”>不赞成使用,请使用样式取代它。
  • 背景图片<table background=”背景图片地址”>不赞成使用,非W3C。

例如:

<table border=”1″ bgcolor=”red” background=”1.jpg”>

<!–background优先于bgcolor–>

<caption>考试成绩单</caption>

<tr>

<th>姓名</th>

<th>性别</th>

<th>语文</th>

<th>数学</th>

</tr>

<tr>

<td>小花</td>

<td>女</td>

<td>89</td>

<td>100</td>

</tr>

<tr>

<td>小花</td>

<td>女</td>

<td>89</td>

<td>100</td>

</tr>

</table>

表格的行属性

<tr>属性

  • 高度 <tr height=”行高度”> 非W3C
  • 边框颜色 <tr bordercolor=”颜色”> 某些浏览器不支持非W3C
  • 行背景 <tr bgcolor=”颜色” background=”图片位置”>某些浏览器不支持。不赞成使用,请使用样式取代它。
  • 行文字水平对齐 <tr align=”对齐方式” > left center right
  • 行文字垂直对齐 <tr valign=”对齐方式”> top middle bottom

例如:

<table border=”1″ align=”center” >

<!–background优先于bgcolor–>

<caption>考试成绩单</caption>

<tr height=”30″ bordercolor=”red” bgcolor=”blue”background=”1.jpg” align=”center”>

<th>姓名</th>

<th>性别</th>

<th>语文</th>

<th>数学</th>

</tr>

<tr height=”50″ bordercolor=”red” bgcolor=”blue”background=”1.jpg” align=”center” valign=”top”>

<td>小花</td>

<td>女</td>

<td>89</td>

<td>100</td>

</tr>

<tr>

<td>小花</td>

<td>女</td>

<td>89</td>

<td>100</td>

</tr>

</table>

单元格属性

语法: <th></th> <td></td>

  • 单元格宽度 <td width=”宽度”></td>不赞成使用,请使用样式取代它。
  • 单元格高度 <td height=”高度”></td>不赞成使用,请使用样式取代它。
  • 单元格水平对齐 <td align=”对齐方式”></td> left center right
  • 单元格垂直对齐 <td valign=”对齐方式”></td> top middle bottom
  • 单元格背景颜色 <td bgcolor=”颜色”></td>不赞成使用,请使用样式取代。
  • 单元格背景图像 <td background=”图像所在位置”></td>非W3C
  • 单元格边框颜色<td bordercolor=”颜色”></td>

这几个属性都与前面 表格行属性基本相同。

  • 单元格水平跨度 <td colspan=”跨度的列数”></td>
  • 单元格垂直跨度 <td rowspan=”跨度的行数”></td>
  • 单元格亮边框 <td bordercolorlight=”亮边框的颜色”></td>
  • 单元格暗边框 <td bordercolordark=”暗边框的颜色”></td>

表格结构

注:以下三个标签很少被使用,浏览器支持性差。

  • 表格表首标签 <thead></thead> 表格的第一行(在caption后)
  • 表格表主体标签 <tbody></tbody> 表格第一行和最后一行中间的部分
  • 表格表尾标签 <tfoot></tfoot> 表格的最后一行

这三种标签拥有同样的属性:背景颜色、对齐方式等。简化了对单元格的设置。


2020年错误博客亲测项目系列

错误教程( cuowu.com )专注网推培训、SEO培训和网赚培训,微信/电话:13722793092

关注微信公众号:第一时间获得错误博客最新教程,让我们一起成长!

公众号二维码