码迷,mamicode.com
首页 > Web开发 > 详细

HTML <table> 标签

时间:2017-06-11 19:14:09      阅读:2472      评论:0      收藏:0      [点我收藏+]

标签:cell   失效   属性   black   使用   建议   font   tab   min   

HTML 表格<table>的使用

 

表格用table表示 表格中每一行用tr 一行中的每一列用td表示

 

例如一个三行两列的表格:

<table>

<tr>

<td>第一行第一列</td>

<td>第一行第二列</td>

</tr>

<tr>

<td>第二行第一列</td>

<td>第二行第二列</td>

</tr>

<tr>

<td>第三行第一列</td>

<td>第三行第二列</td>

</tr>

</table>

th 表示的是表头 表头中的文字默认为加粗居中 th要放在tr中用于替换td,例如:

<table>

<tr>

<th></th>

<th></th>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

 

table 的常用属性

 

1.border属性 

给表格加边框 默认给所有的td加边框 并且给整个table加外边框 当增大border的值的时候 td 的边框不变 只有最外的变宽

<table border="10"></table>

 

2.cellspacing属性 

 

表示的是单元格与单元格之间的距离 注意cellspacing=“0” 单元格与单元格之间没有距离 但是边框线的宽度依然是两条线的宽度

 

表格边框合并的 css 写法 :style="border-collapse: collapse;

 

  这条css 与cellspacing有什么区别?

cellspacing=“0”仅仅是将单元格之间的距离调整为0,但是单元格之间还是两条线

而style="border-collapse: collapse; 是将表格相邻的两条边框合并处理,只有一条线存在。一旦边框合并 cellspacing属性将会失效

 

3.cellpadding属性 单元格边框与单元格中的文字的距离

 

4.height:表格的高度 width:表格的宽度

 

<table height="100px" width="100px"></table>

<table style="height: 100px;width: 100px;"></table>(CSS写法)

 

5.align属性  

 

设置表格整体在浏览器的位置,已经被淘汰了,不建议使用。

可选值:left center right

 

6.bgcolor 背景色

bgcolor="red"

 

7.bordercolor 边框颜色

 

bordercolor="blue"

 

8.background 背景图 背景色和背景图同时存在时 背景图会覆盖背景色

 

background="img/computer.jpg"

 

 

 

<tr>与<td>常用属性

 

 

 

1.

 

  width:单元格宽度

 

  height:单元格高度

 

  当你改变了一行或者

 

 

 

2.bgcolor属性 单元格的背景颜色 

 

 

 

<table bgcolor="aqua">

 

<tr bgcolor="blue">

 

<td bgcolor="black"></td>

 

</tr>

 

</table>

 

最里面的覆盖外面的

 

 

 

3. align属性 设置单元格中文字水平对其方式,默认局左

 

可选值:left center right

 

 

 

4.valign属性 设置单元格中文字垂直对其方式,默认局中

 

可选值:top middle(center) bottom 上 中 下

 

 

 

5.nowrap属性 nowrap="nowrap"

 

当单元格文字过多时,设置单元行文字不断行显示,但是会把表格的宽度撑大

 

 

 

 

 

表格的跨行与跨列

 

 

 

1.跨列:在td上使用属性colspan="n"进行跨列。如果一个单元个跨n列,则单元格右边的n-1个单元格要去掉。

 

2.跨行:在td上使用属性rowspan="n"进行跨行。 如果一个单元个跨n行,则单元格下边的n-1个单元格要去掉。

 

HTML <table> 标签

标签:cell   失效   属性   black   使用   建议   font   tab   min   

原文地址:http://www.cnblogs.com/shihaojia/p/6985489.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!