前言:前段时间去面试,人家问这些东西,我自己好多都知道,但是都是似是而非,现在就把它澄清了!
-----------------------------------------------------------------------------------------
1.th
定义和用法
指定标题列。标题列将在单元格中居中并以粗体显示。
语法
<th>Object</th>
实例
<tableborder="1">
<tr>
<th>姓名</th>
<th>电话</th>
<th>传真</th>
</tr>
<tr>
<td>BillGates</td>
<td>555 77854</td>
<td>555 77855</td>
</tr>
</table>
2.border
定义和用法
border 为表格的边框,border=1为将表格边框设置为1PX
注:table定义border:1px solid#000的时候,边线是在table之内出现的,外边的宽度不变。
语法
<tableborder=N>
实例
<html>
<head>
<title> newdocument </title>
</head>
<body>
<tableborder="1">
<tr>
<td>row 1, cell1</td>
<td>row 1, cell2</td>
</tr>
<tr>
<td>row 2, cell1</td>
<td>row 2, cell2</td>
</tr>
</table>
</body>
</html>
3.colspan,rowspan
定义和用法
row行 column列
colspan 列跨距的数值,如:colspan=3,表示该格子跨3列显示
rowspan 行跨距的数值, 如:rowspan=5,表示该格子跨4行显示
语法
<td colspan=Mrowspan=N>Object</td>
实例
<html>
<h1 >可以查看源代码学习这个table,呵呵!</h1>
<table border=1 cellpadding=0cellspacing=0 width=360 style='border-
collapse:collapse;table-layout:fixed;width:270pt'>
<tr>
<th rowspan=2colspan=2>跨2行2列</th>
<throwspan=2>跨2行1列</th>
<thcolspan=2>跨2行一列</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<th rowspan=2>r1
<th>r11
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<th>r12
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<thcolspan=2>r2</th>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
<br><br><br><br><br><br>
1. 让表格带有边框效果(来自网络收集)
<TABLE borderColor=”#cccccc”cellSpacing=”1″ cellPadding=”0″ align=”
center”bgColor=”#cccccc” border=”0″>
<TR>
<TD height=”25″ colspan=”3″bgColor=”#ffffff”>testtest</TD>
</TR>
</table>
</html>
4.cellspacing
定义和用法
cellspacing属性可设置或返回在表格中的单元格之间的空白量(以像素为单位)
语法
tableObject.cellSpacing=pixels
实例
下面的例子更改了表格的 cellSpacing:
<html>
<head>
<script type="text/javascript">
function spacing()
{
document.getElementByIdx('myTable').cellSpacing="15"
}
</script>
</head>
<body>
<table id="myTable"border="1">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<————td>400</td>
</tr>
</table>
<br />
<input type="button" onclick="spacing()"value="Change Cellspacing">
</body>
</html>
5.cellpadding
定义和用法
cellPadding属性可设置或返回单元格边框与单元格内容之间的空白量(以像素为单位)。
说明:
cell -- 一个小格
pad -- 垫子
cellpadding=10
就是在原有小格的基础上沿四边各加上10 个点子宽度,也就是把原来的小格变大,但原来写的内容占的大小范围不变。
cellpadding 用于<TABLE>.
语法
tableObject.cellPadding=pixels
实例
The followingexample changes the cell padding of atable:<html>
<head>
<script type="text/javascript">
function padding()
{
document.getElementByIdx('myTable').cellPadding="15"
}
</script>
</head>
<body>
<table id="myTable"border="1">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br />
<input type="button" onclick="padding()"value="Change Cellpadding">
</body>
</html>