html-表格总结 - 爱码网

简单表格

基本表格

<table width="300" border="1" bordercolor="black" cellspacing="0">
 <tr>                
   <td>百度</td>
   <td>谷歌</td>
   <td>搜狗</td>
 </tr>
  <tr>
   <td>优酷</td>
   <td>土豆</td>
   <td>酷6</td>
 </tr>
  <tr>
   <td>163</td>
   <td>126</td>
   <td>新浪</td>
 </tr>
</table>

无边框表格

<table width="300" border="0" bordercolor="black" cellspacing="0">
 <tr>
   <td>百度</td>
   <td>谷歌</td>
   <td>搜狗</td>
 </tr>
  <tr>
   <td>优酷</td>
   <td>土豆</td>
   <td>酷6</td>
 </tr>
  <tr>
    <td>163</td>
    <td>126</td>
    <td>新浪</td>
  </tr>
</table>

双线表格

<table width="300" border="1" bordercolor="black" cellspacing="1">
 <tr>
   <td>百度</td>
   <td>谷歌</td>
   <td>搜狗</td>
 </tr>
  <tr>
   <td>优酷</td>
   <td>土豆</td>
   <td>酷6</td>
 </tr>
  <tr>
   <td>163</td>
   <td>126</td>
   <td>新浪</td>
 </tr>
</table>

合并多列表格

<table width="300" border="1" bordercolor="black" cellspacing="1">
 <tr>
   <td colspan="3" align="center">百度</td><!--colspan合并列单元格-->
 </tr>
  <tr>
   <td>优酷</td>
   <td>土豆</td>
   <td>酷6</td>
 </tr>
  <tr>
   <td>163</td>
   <td>126</td>
   <td>新浪</td>
 </tr>
</table>

合并多行表格

<table width="300" border="1" bordercolor="black" cellspacing="1">
  <tr>
   <td rowspan="3">百度</td><!--rowspan合并多列单元格-->
   <td>谷歌</td>
   <td>搜狗</td>
  </tr>
  <tr>
   <td>土豆</td>
   <td>酷6</td>
 </tr>
  <tr>
   <td>126</td>
   <td>新浪</td>
 </tr>
</table>

复杂表格

复杂表格1

<table width="300" border="1" bordercolor="black" cellspacing="1">
  <tr>
   <td>百度</td>
   <td colspan="2">谷歌</td>
 
  </tr>
  <tr>
   <td>优酷</td>
   <td rowspan="2">土豆</td>
   <td>酷6</td>
 </tr>
  <tr>
   <td>163</td>
 
   <td>新浪</td>
 </tr>
</table>

复杂表格2

<table width="300" border="1" bordercolor="black" cellspacing="1">
 <tr>
   <td>百度</td>
   <td>谷歌</td>
   <td>搜狗</td>
 </tr>
  <tr>
   <td colspan="2">优酷</td>
   <td rowspan="2">酷6</td>
 </tr>
  <tr>
   <td>163</td>
   <td>126</td>
 </tr>
</table>

凸起表格1

 <table width="300" border="1" bordercolor="black" cellpadding="5" cellspacing="1" bgcolor="gray" bordercolorlight="black" bordercolordark="white">
   <tr>
     <td>百度</td>
     <td>谷歌</td>
     <td>搜狗</td>
   </tr>
    <tr>
     <td>优酷</td>
     <td>土豆</td>
     <td>酷6</td>
   </tr>
    <tr>
     <td>163</td>
     <td>126</td>
     <td>新浪</td>
   </tr>
 </table>

凹陷表格

<table width="300" border="1" bordercolor="black" cellpadding="5" cellspacing="1" bgcolor="gray" bordercolorlight="white" bordercolordark="black">
 <tr>
   <td>百度</td>
   <td>谷歌</td>
   <td>搜狗</td>
 </tr>
  <tr>
   <td>优酷</td>
   <td>土豆</td>
   <td>酷6</td>
 </tr>
  <tr>
   <td>163</td>
   <td>126</td>
   <td>新浪</td>
 </tr>
</table>

凸起表格2

<table width="300" border="0" bgcolor="blue" bordercolor="black" cellpadding="5" cellspacing="1">
 <tr bgcolor="white">
   <td>百度</td>
   <td>谷歌</td>
   <td>搜狗</td>
 </tr>
  <tr  bgcolor="white">
   <td>优酷</td>
   <td>土豆</td>
   <td>酷6</td>
 </tr>
  <tr  bgcolor="white">
   <td>163</td>
   <td>126</td>
   <td>新浪</td>
 </tr>
</table>