WEB前端开发学习----2.HTML表格table标签

[html]  view plain copy
 
  1. css没用流行之前,网页都是用表格,也就是table标签制作的。虽然现在不用table做网页了,但是我们还是应该掌握这个标签。span>  

先给出最表格的基本格式:

[html]  view plain copy
 
  1. <table>  
  2.      <tr>  
  3.          <tb>  
  4.          tb>  
  5.      tr>  
  6. <table>  

  其中为行标签,即表格的行。为单元格数据标签。也就是说一个表格为3行3列,则有3个标签,3个标签。

 

[html]  view plain copy
 
  1. <pre name="code" class="html">        <pre name="code" class="html"><span style="white-space:pre">    span><table border="1">  

这是个3行3列的表格

 
   

第1行第1列第1行第2列第1行第3列第2行第1列第2行第2列第2行第3列第3行第1列第3行第2列第3行第3列

 
   


caption属性为表格的标题。为了好看,我在这里border属性是给表格加上了边框。也可以不加,默认是没有的。

 

跨行列表格 

rowspan 跨行属性 假如跨两行则为

colspan 跨列属性

 

 

cellpadding 单元格的填充

cellspacing 单元格之间的空间

注意第三个表格,边框只有1px.

思路:将表格背景设为黑色,然后将单元格背景设为白色,单元格无边框,这样覆盖在表格上,且单元格之间距离为零,就可得到此效果。

代码如下:

 

[html]  view plain copy
 
    1. <table align="center" border="1" width="500px">  
    2.         <caption>这是正常成绩表caption>  
    3.         <tr>  
    4.             <th colspan="2">姓名th>  
    5.             <td align="right">小明td>  
    6.             <td align="right">小花td>  
    7.         tr>  
    8.         <tr>  
    9.             <th rowspan="3">学br>科th>  
    10.             <td>语文td>  
    11.             <td align="right">100td>  
    12.             <td align="right">98td>  
    13.         tr>  
    14.         <tr>  
    15.             <td>数学td>  
    16.             <td align="right">96td>  
    17.             <td align="right">97td>  
    18.         tr>  
    19.         <tr>  
    20.             <td>外语td>  
    21.             <td align="right">90td>  
    22.             <td align="right">100td>  
    23.         tr>  
    24.     table>  
    25.     <br/>  
    26.     <table align="center" border="1" width="500px" cellspacing="0">  
    27.         <caption>这是粗边框成绩表(1px框)caption>  
    28.         <tr>  
    29.             <th colspan="2">姓名th>  
    30.             <td align="right">小明td>  
    31.             <td align="right">小花td>  
    32.         tr>  
    33.         <tr>  
    34.             <th rowspan="3">学br>科th>  
    35.             <td>语文td>  
    36.             <td align="right">100td>  
    37.             <td align="right">98td>  
    38.         tr>  
    39.         <tr>  
    40.             <td>数学td>  
    41.             <td align="right">96td>  
    42.             <td align="right">97td>  
    43.         tr>  
    44.         <tr>  
    45.             <td>外语td>  
    46.             <td align="right">90td>  
    47.             <td align="right">100td>  
    48.         tr>  
    49.     table>  
    50.     <br/>  
    51.     <table align="center" bgcolor="black" width="500px" cellspacing="1">  
    52.         <caption>这是细边框成绩表(1px框)caption>  
    53.         <tr>  
    54.             <th bgcolor="white" colspan="2">姓名th>  
    55.             <td bgcolor="white" align="right">小明td>  
    56.             <td bgcolor="white" align="right">小花td>  
    57.         tr>  
    58.         <tr>  
    59.             <th bgcolor="white" rowspan="3">学br>科th>  
    60.             <td bgcolor="white">语文td>  
    61.             <td bgcolor="white" align="right">100td>  
    62.             <td bgcolor="white" align="right">98td>  
    63.         tr>  
    64.         <tr>  
    65.             <td bgcolor="white">数学td>  
    66.             <td bgcolor="white" align="right">96td>  
    67.             <td bgcolor="white" align="right">97td>  
    68.         tr>  
    69.         <tr>  
    70.             <td bgcolor="white">外语td>  
    71.             <td bgcolor="white" align="right">90td>  
    72.             <td bgcolor="white" align="right">100td>  
    73.         tr>  
    74.     table>  

转载于:https://www.cnblogs.com/cdh-fw/p/4177180.html

你可能感兴趣的:(WEB前端开发学习----2.HTML表格table标签)