您现在的位置:首页 >> 前端 >> 内容

表格常使用记录

时间:2017/1/25 10:23:40 点击:

  核心提示:表格table代表着一个时代,到现在为止,虽然大多数网页布局已经被 P 取代了,但是个别网页依然使用着表格布局。一个表格需要有表格的标题,在表格制作时一般会将标题写在表格的外面,此时,如果直接用普通的...

表格<table>代表着一个时代,到现在为止,虽然大多数网页布局已经被 P 取代了,但是个别网页依然使用着表格布局。

一个表格需要有表格的标题,在表格制作时一般会将标题写在表格的外面,此时,如果直接用普通的行级标签或者块级标签来写一段文字的话,很难做到跟随表格居中的功能。在HTML中为程序员提供了表格标题标签 <caption></caption> ,方便了程序员为了定位标题与表格位置的不便。

<caption></caption>标签需要写在<table></table>双标签的中间,这样做是为了让标题可以定位到表格,在标签中间填入表格的标题内容,标题的内容会自动对齐表格居中。

当然,caption 标签也存在align属性,不过一般不建议使用,如果使用了,将失去原来功能存在的意义了。

表格在默认情况下是空白的,浏览器在接收到<table>的时候,它只能知道在这个位置上存在一个表格,我们在表格里边添加内容,我们就会看到表格的内容按照一定的顺序排列起来,那么我们需要更清晰的看清楚内容,就需要为我们的表格添加边框、颜色、内外边距等。

表格的边框由属性 border 的属性值决定,主要设置边框的宽度,具体样式建议使用CSS修改。

height、width:高度与宽度。

bgcolor:设置表格的背景颜色,也可以在单元格中设置。

表格内的内边距在使用时有点讲究,我们用 cellpadding 来设置表格内边距,默认情况下是 1px 的距离,它代表着表格跟表格内部内容的距离,如果此时表格的宽度或高度是一定的,而表格的内容大小设置也是一定的,那么当我们给表格设置内边距的时候,如果表格的内边距加上表格内容的大小,要大于表格原来的设置的宽度或者高度大小,那么此时的表格讲被我们的内容给挤大了,(*@ο@*) 哇~就像气球一样,当里面的空气不断变多的时候,气球的大小也会跟着变大。

表格的边框距离在设置上也有一点讲究,我们用 cellspacing 来设置表格的边框距离,默认情况下表格的边框距离是 2px ,如果我们将每个单元格的大小固定下来,那么当我们去设置边框距离的时候,我们设置的数值如果要大于默认的2px的话,那么表格同样的会被我们给撑大,所以在设置大小的时候需要根据情况而定。

alige属性设置表格对齐居中的位置。这个属性在table、tr、td、th、caption中都可以使用,使用时,哪一个的作用范围越小,就使用哪个属性值。

<tr>标签代表表格的行。

<th>、<td>代表表格每一行的单元格。

使用 th 标签的单元格中的内容将会自动居中并且加粗,可以作为每一行或列的提示来使用;

使用 td 标签的单元格将直接将我们输入的内容显示出来。

作者:网络 来源:chenlinwei