HTML中的cellSpacing、cellPadding、colspan等解析 html cellspacing

前言:前段时间去面试,人家问这些东西,我自己好多都知道,但是都是似是而非,现在就把它澄清了!

-----------------------------------------------------------------------------------------

1.th


定义和用法
指定标题列。标题列将在单元格中居中并以粗体显示。

语法
<th>Object</th>
实例
<tableborder="1">
<tr>
HTML中的cellSpacing、cellPadding、colspan等解析 html cellspacing
<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>

  

爱华网本文地址 » http://www.aihuau.com/a/25101015/272061.html

更多阅读

怎样使用百度工具栏保存网页中的视频、音频? 保存网页音频

很多网友为了保存网页上的音视频伤透了,脑筋,安装了各种各样的软件,甚至用上了屏幕录像。其实完全不用这么麻烦,只需用一个小插件就能轻松下载。怎样使用百度工具栏保存网页中的视频、音频?——工具/原料IE浏览器 百度工具栏怎样使用百度

运动中的极点、疲劳概念以及解决的方法 如何解决审美疲劳

一、运动中的极点在长跑过程中,有一段时间身体感到特别难受,出现胸部发闷、呼吸困难、心跳、腿软、头晕恶心、步子发沉等现象,这就是生理学上所指的“极点”。它是一种正常的生理现象。“极点”是怎样产生的呢?它是人体从安静状态转

声明:《HTML中的cellSpacing、cellPadding、colspan等解析 html cellspacing》为网友灬腦塰觸電分享!如侵犯到您的合法权益请联系我们删除