1.8 HTML表格_HTML视频教程

- 灬无言 - 阅 1,889

小小课堂网HTML视频教程零基础入门首选。

下方为HTML视频教程,如视频不能正常播放,请安装flash或更换浏览器。请记得在视频右下角选择“超清”,然后点击“全屏”,效果更加。

1.8.1 创建表格

语法: <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>

1.8.2 表格的标题

语法:<table>  <caption>表格的标题</caption>  </table>

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

如:<table border=”1″>

<caption>成绩单</caption>

<tr>

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

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

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

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

</tr>

</table>

1.8.3 表头

语法:<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>

1.8.4 表格的属性

在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>

1.8.5 表格的行属性

 <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>

1.8.6 单元格属性

语法: <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>

1.8.7 表格结构

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

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

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

图文不够清楚?请观看HTML视频教程

扫描二维码关注“小小课堂网”

第一时间获取最新教程

二维码

9

本文转载 " https://www.xxkt.org/1298 "

原文地址 " 小小课堂网原创教程。未经许可,禁止转载。否则,将追究法律责任! "

相关文章!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

error: Content is protected !!