网络运营之剑—html语言(表格设置)

1. HTML的表格及图片插入
img标签
img 元素向网页中嵌入一幅图像。
请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。
<img> 标签有两个必需的属性：src 属性 和 alt 属性。
<img> 标签的 src 属性是必需的。它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。

alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。
假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：
? 网速太慢
? src 属性中的错误
? 浏览器禁用图像
? 用户使用的是屏幕阅读器
<img> 标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。
我们强烈推荐您在文档的每个图像中都使用这个属性。这样即使图像无法显示，用户还是可以看到关于丢失了什么东西的一些信息。而且对于残疾人来说，alt 属性通常是他们了
解图像内容的唯一方式。
<th>标签用来表示表格的表头，表头的字是粗体显示的。   可以竖直和横向设置。
横向：
<table border="1">
<tr>
  <th>姓名</th>
  <th>电话</th>
  <th>传真</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>
竖直：
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>传真</th>
  <td>555 77 855</td>
</tr>
</table>
</body>
</html>

2. colspan属性是跨列属性，使用该属性定义一个单元格占几个单元格的宽度。

例a:
<table border="5">
  <tr>
    <td>第一天</td>
    <td>第二天</td>
  </tr>
  <tr>
    <td colspan=2>两天之和</td>
</table>
这时候，第二行“两天之和”单元格的宽度是“第一天”和“第二天”两个单元格宽度的和。
例b:
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">资料</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>年龄</td>
  <td>性别</td>
</tr>
</table>
这时候，第一行“资料”的宽度是第二行“年龄”和“性别”宽度之和。

3. rowspan属性是跨行属性，使用该属性定义一个单元格占几个单元格的宽度。

例a：
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">资料</th>
  <td>年龄</td>
</tr>
<tr>
  <td>性别</td>
</tr>
</table>


<table width="105" height="45" border="1">
   <tr>
     <td width="7" rowspan="2">1</td>
     <td width="8">2</td>
     <td width="8">3</td>
   </tr>
   <tr>
     <td colspan="2">4</td>
   </tr>
 </table>
优先width="105"
<table>代表表格</table> 
<tr>代表表格中的一行</tr> 
<td>代表表格中的一列</td>
'tr'与'td'交成一个单元格
<table>...</table>之间有多少个<tr>，就有多少行
<tr>...</tr>之间有多少个<td>，就有多少列
(1)设置空白单元格：
<table border="1">
<tr>
  <td>Some text</td>
  <td>Some text</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>Some text</td>
</tr>
</table>
上面的例子，你可以看到，给这个单元格加上一个空格符号&nbsp;之后，单元格的边界就显示出来了。
(2)设置表格标题：
<table border="6">
<caption><h4>表格标题</h4></caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>
上面的例子，你可以看到，给这个单元格加上<caption>属性之后，表格就有标题了。
(3)设置表格高度、宽度：
a、width宽度：
<table width="350" border="1">
 <tr>
  <th align="center">分数</th>
  <th align="center">期中考试</th>
  <th align="center">期末考试</th>
 </tr>
</table>
b、height高度：
<table height="350" border="1">
 <tr>
  <th align="center">分数</th>
  <th align="center">期中考试</th>
  <th align="center">期末考试</th>
 </tr>
</table>
c、当表格和单元格同时设置宽度并有冲突时，系统会默认优先对整个表格的宽度设置。
只显示上边框 ＜table frame=above> 
只显示下边框 ＜table frame=below> 
只显示左、右边框 ＜table frame=vsides> 
只显示上、下边框 ＜table frame=hsides> 
只显示左边框 ＜table frame=lhs> 
只显示右边框 ＜table frame=rhs> 
不显示任何边框 ＜table frame=void>

4. cellspacing是表格里单元格之间的距离;
cellpadding是表格里单元格内的空白部分;
俗称就是外补丁和内补丁,类似应用在div和span上的margin和padding
你可一试验一下,给单元格加上边框,在改变一下cellpadding和cellspacing的值,看有什么变化.
例如:
<table>
<tr>
  <td style="cellspacing:10px;cellpadding:10px;border:1px solid #CCCCCC;">
    
  </td>


  <td style="cellspacing:10px;cellpadding:20px;border:1px solid #CCCCCC;">
    
  </td>
</tr>
</table>

着就是说:td的border与table的边缘之间有10个像素的补丁(cellspacing),td的border与td的内元素有20个像素的补丁(cellpadding).

5. bgcolor 、background 、align
bgcolor背景色设置：
a、 单元格背景色：
<table border="1">
<tr>
  <td bgcolor="red">第一</td>
  <td>行</td>
</tr>   
<tr>
  <td  background="../images/html_tutorials/background.gif">第二</td>
  <td>行</td>
</tr>
</table>
b、 表格背景色“
<table border="1" bgcolor="red">
<tr>
  <td>第一</td>
  <td>行</td>
</tr>   
<tr>
  <td>第二</td>
  <td>行</td>
</tr>
</table>
background背景图片设置：
<table border="1" background="../images/html_tutorials/background.gif">
<tr>
  <td>第一</td>
  <td>行</td>
</tr>   
<tr>
  <td>第二</td>
  <td>行</td>
</tr>
</table>
align单元格对齐方式
<table width="350" border="1">
 <tr>
  <th align="center">分数</th>
  <th align="center">期中考试</th>
  <th align="center">期末考试</th>
 </tr>
 <tr>
  <td align="left">芙蓉姐姐</td>
  <td align="right">250.10</td>
  <td align="right">50000.20</td>
 </tr>
 <tr>
  <td align="left">程菊花</td>
  <td align="right">1000.00</td>
  <td align="right">5000.45</td>
 </tr>
 <tr>
  <td align="left">周笔畅</td>
  <td align="right">2000.40</td>
  <td align="right">500.00</td>
 </tr>
 <tr>
  <td align="left">黄新</td>
  <td align="right">300.50</td>
  <td align="right">800.65</td>
 </tr>
</table>
例：
<table border="10" cellpadding="20" cellspacing="30">
<tbody>
<tr>
<td>
<a style="cursor: pointer;" href="http://www.360buy.com/product/1000065672.html" target="_blank"><img 


src="http://images.shop.360buy.com/shop/ware/description/10287/upload/416/716a19df-5773-41a1-9cac-c7fc444863f3.jpg" alt="" /></a>
</td>
6. 表格的设置
(1)表格的border值为10，  表明  设置的表格边界为10个元素（该值设置的为整个表格的最外边框宽度）
(2)表格中cellpadding值为20，  表明  表格中元格内的空白部分为20个元素（这个表格中  每个单元格的border与它的内元素有20个像素的补丁；若该值为0，则单元格的border
与内元素之间没有补丁）
(3)表格的cellspacing值为30，  表明  表格里单元格之间的距离为30个元素（这个表格中  所有单元格的border与周围单元格、表格的border之间有30个像素的补丁；若该值为0
，则单元格之间没有间隙）
(4) style="cursor: pointer;"  该指令解释为  建立竖起一只手指的手形光标，设置后边href的链接形象（style  风格）
   style="cursor: pointer;"并不是必须的一个属性，对于含有链接的部分程序，不进行该光标形状设置时，默认即为“竖起一支手指的手形光标”。
(5)target="_blank"   该指令解释为  在新窗口中打开href所指定的链接（target  目标）
(6)Img标签为src属性的链接图片创建占位空间，alt属性链接的是src属性所链接的图片无法显示时的替代文本
(7)<a>标签通过使用 href 属性，创建指向另外一个文档的链接（或超链接）
(8)<table border="10" cellpadding="20" cellspacing="30">