4 表格标签

  • 4 表格标签已关闭评论
  • 64 次浏览
  • A+
所属分类:Web前端
摘要

表格标签也是一种复合标签。由:table,tr,td,th,thead,tbody组合,由行和列组合成,行和列交叉的地方就是单元格。在HTML中使用table来定义表格。网页的表格和办公软件里面的xls一样,都是有行有列的。HTML使用tr标签定义行,使用td标签定义列。


4 表格标签

表格标签也是一种复合标签。由:table,tr,td,th,thead,tbody组合,由行和列组合成,行和列交叉的地方就是单元格。在HTML中使用table来定义表格。网页的表格和办公软件里面的xls一样,都是有行有列的。HTML使用tr标签定义行,使用td标签定义列。

1、`<table>`和`</table>`表示一个表格的开始和结束。一组`<table>...</table>`表示一个表格。  2、border用于设置整个表格的边框宽度,默认为0,表示不显示边框。  3、`<tr>`和`</tr>`表示表格中的一行的开始和结束。一组`<tr>...</tr>`,一个表格可以有多行。通过计算table标签中包含多少对tr子标签即可知道一个表格有多少行。  4、`<td>`和`</td>`表示表格中的一个单元格的开始和结束。通过计算一个tr里面包含了多少对td自标签即可知道一个表格有多少列,多少的单元格了。 
table相关属性:
属性 描述
width px、% 规定表格的宽度。
height px、% 规定表格的高度。
align left、center、right 规定表格相对周围元素的对齐方式。
bgcolor rgb(x,x,x)、#xxxxxx、colorname 规定表格的背景颜色。
background url 规定表格的背景图片。
border px 规定表格边框的宽度。
cellpadding px、% 规定单元格边框与其内容之间的空白。
cellspacing px、% 规定单元格之间的空隙。
td相关属性
属性 描述
width px、% 规定单元格的宽度。
height px、% 规定单元格的高度。
align left、center、right 规定单元格内容的对齐方式。
valign top、middle、bottom 规定单元格内容的垂直对齐方式。
bgcolor rgb(x,x,x)、#xxxxxx、colorname 规定单元格的背景颜色。
background url 规定单元格的背景图片。
rowspan number 规定单元格合并的行数
colspan number 规定单元格合并的列数
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>表格标签</title> </head> <body> <table width="400px" border="1" align="center" cellpadding="10px" cellspacing="1px">     <tr bgcolor="#7fff00" align="center">         <th>姓名</th>         <th>年龄</th>         <th>部门</th>         <th>业绩</th>     </tr>     <tr align="center">         <td>张三</td>         <td>18</td>         <td>外交部</td>         <td>87</td>     </tr>     <tr align="center">         <td>李四</td>         <td>20</td>         <td rowspan="2">销售部</td>         <td>93</td>     </tr>     <tr align="center">         <td>王五</td>         <td>19</td>         <td>89</td>     </tr> </table>   <table width="400px" border="1" align="center" cellpadding="10px" cellspacing="1px">     <thead bgcolor="#7fff00" align="center">         <th>姓名</th>         <th>年龄</th>         <th>部门</th>         <th>业绩</th>     </thead>     <tbody>         <tr align="center">         <td>张三</td>         <td>18</td>         <td>外交部</td>         <td>87</td>     </tr>     <tr align="center">         <td>李四</td>         <td>20</td>         <td rowspan="2">销售部</td>         <td>93</td>     </tr>     <tr align="center">         <td>王五</td>         <td>19</td>         <td>89</td>     </tr>     </tbody> </table> </body> </html> 
代码效果图如下:

4 表格标签