关于table表格的一些问题
前几天同学突然问到了关于table表格的边框的一些问题,我没想到的是这个关于他这个问题却把我困惑住了。所以我通过各种实验然后查询算是对table这个东西有了一些新的认识。
问题1 border
我们都知道table标签对于表格的一级一些规范化的样式提供很多方便,而且table布局出来的东西给人的感觉很整齐。
但是对于我们经常使用的表格我们也许会忽略一些问题。
首先是table的边框border问题。
如果我们想给一个table 表格设置边框我们也许会利用行内样式直接,如下
<table width="200px" height="100px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
这样将会产生一个宽200高100的表格,但是没有边框。
如下:
如果我们想要边框,也许我们会直接在行内样式书写,如:
<table width="200px" height="100px"; border="1">
产生的效果如下:
关键到了首先这是让我迷惑的第一点:
对于我们如果只想要貌似不是双边框的表格我会这样写
<table width="200px" height="100px"; border="1" cellspacing="0">
效果如下:
(切记:cellspacing 是代表单元格与单元格之间的空白)
如果我们想要单元格的填充变大,我们会这样写如下:
<table width="200px" height="100px"; border="1" cellspacing="0" cellpadding="20">
效果图如下:
(切记:cellpadding这是单元格内部的空白)
然后我由于装的一下和人家说,样式还是写在外面好,但是产生的效果却让我意外了。
如:用css样式内部样式写
table{
border: 1px solid #ff0;
width: 200px;
height: 100px;
}
我想的是这样的,如下:
但是结果却是,如下:
结果初开始真的很差强人意,当时我也是糊涂了,后来经过反复测试我才知道,如过想要表格里面的td也有边框,原来需要这样写:
table,td{
border: 1px solid #ff0;
width: 200px;
height: 100px;
}
(切记:不在行内样式写时,一定要注意,table只是表格的外边框,如果想要内边框要加上td,行内样式书写相当于给table tr td 都加上了边框)
现想到如果只给td会产生如下的效果:
补充:用css写时
行内样式cellspacing 相当于css中的 border-collapse: collapse;
行内样式cellpadding 相当于css中的padding
问题2 align valign
居中 表格居中我们在行内样式一般会用到align,如下:
<table align="center" border="1" width="200px" height="100px">
同样我们让表格上左或右表格也能乖乖的听话,但是对于垂直居中可能表格就有些淘气了。
例如:
<table align="center" border="1" width="200px" height="100px" valign="bottom">
对于表格完全没有效果,后来经过多次实验我才知道,valign的top,bottom,middle是相对于表格的tr,td 而言的,并且表格的td也就是说表格要有固定的高度才行,如下代码:
<table align="center" border="1" width="200px" height="300px" >
<tr valign="bottom">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr valign="top">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr valign="middle">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td valign="top">4</td>
<td valign="middle">5</td>
<td valign="bottom">6</td>
</tr>
</table>
效果如下:
问题3 rowspan colspan
colspan 是合并列
代码如下:
<table align="center" border="1" width="200px" height="100px" >
<tr >
<td colspan="2">1</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
效果如下:
rowspan 是合并列, 代码如下:
<tr >
<td colspan="2">1</td>
<td>2</td>
</tr>
<tr >
<td rowspan="2">4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
效果如下:
总结
- 行内样式
border ="1"
是相当于给table , tr ,td 都给了一个1像素的边框 - 行内样式cellspacing 相当于css中的 border-collapse: collapse;
行内样式cellpadding 相当于css中的padding - gn对table有用但valign对table无用,但对tr,td有用,前提是td要有固定的高度,高度不够也不行。
- colspan 是合并列 rowspan 是合并行