每个表格都是由 table 标签开始。

每个表格行由 tr 标签开始。

每个表格数据由 td 标签开始。

这样是一行三列:

<table border="1">

<tr>

 <td>100</td>

<td>200</td>

<td>300</td>

</tr>

</table>

这样是二行三列

<table border="1">

<tr>

<td>100</td>

<td>200</td>

<td>300</td>

</tr>

<tr>

<td>400</td>

<td>500</td>

<td>600</td>

</tr></table>

border="1" 是边框的意思,1是最基本的边框。数字越大边框越粗。

不希望显示边框输入0就可以了。

<table border="1">

 <caption>表格的标题</caption>

         <tr>

                <th>表头<th>

                <td>单元格</td>

         </tr>

        <tr>

               <th>表头</th>

              <td>单元格</td>

        </tr>

</table>

<th></th>这是表格的表头字体比较粗。用上面这种方式可以写垂直表格。

<caption></caption>表格标题的意思,在表格的正上方

<table border="1">                                        ,<table border="1">

 <tr>                                                              <tr>

  <th>姓名</th>                                                <th>姓名</th>

  <th colspan="2">电话</th>                              <td>金正恩</td>

 </tr>                                                             </tr>

 <tr>                                                              <tr>

  <td>金正恩</td>                                            <th rowspan="2">电话</th>

  <td>38 38 383</td>                                      <td>38 38 383</td>

  <td>38 38 383</td>                                     </tr>
 </tr>                                                            <tr>

</table>                                                          <td>38 38 383</td>

                                                                     </tr>

                                                                    </table>

以上是两种表格的对比,colspan的意思是合并单元格,"2"的意思是占据2行

rowspan的意思是行,“2”同样是占据两行的意思,需要注意的是另td要用tr写一行才不会超过边框。

<table border="1">

<tr>

<td>

<p>表格里面可以放段落</p>

</td>

<td>表格里面还可以放表格

<table border="1">

<tr>

<td>a</td>

<td>b</td>

</tr>

<tr>

<td>c</td>

<td>d<td>

</tr>

</table>

</td>

</tr>

<tr>

<td>表格里面还可以放列表

<ol>

<li>春</li>

<li>夏</li>

<li>秋</li>

<li>东</li>

</ol>

</td>

<td><a href=http://www.baidu.com>表格真的非常大。</a><td>

</tr>

</table>

看得我都头晕了。下次还是用HTML格式写。表格可以容纳很多东西。

<!doctypy html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
          <table border="1" cellpadding="10">
                  <tr>
                        <td>第一</td>
                        <td></td>
                  </tr>
                  <tr>
                        <td>第二</td>
                        <td></td>
                  </tr>
          </table>
</body>
</html>

border是边框的意思,调节外部边框大小。cellpadding是补白的意思,可以调节单元格和文字之间的距离,设置之后可以增加点美观。

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>如何添加单元格之间的距离</title>
</head>
<body>
           <table border="1" cellspacing="10" >
                     <tr>
                             <td>第一</td>
                             <td>排</td>
                     </tr>
                     <tr>
                             <td>第二</td>
                             <td>排</td>
                     </tr>
           </table>
</body>
</html>

  cellspacing就是用来调解单元格与单元格之间的距离。

<!doctype html>
<html>
<head>
          <meat charset="utf-8">
          <title>图片颜色与图片背景</title>
</head>
<body>
<table border="1"  cellpadding="15"
style="background:url(./images/图片.jpg) no-repeat scroll 0 0 red;"
>
           <tr>
                 <td>春</td>
                 <td>夏</td>
           </tr>
            <tr>
                  <td>秋</td>
                  <td>冬</td>
            </tr>
</table>
</body>
</html>
这个我采用了css的格式写的一个表格颜色与背景的形式style表示定义样式,用处比较多
background:url(./images/图片.jpg) 这个括号要写进去,里面是我图片的一个位置
no-repeat scroll 0 0 red 是颜色的背景,如果只需要颜色不要背景用bgcolor=“颜色”
2种可以放在一起,只需要一种删除掉另一种就可以了。
<!doctype html>
<html>
         <head>
                <meta charset="utf-8">
                <title>每月消费表</title>
         </head>
         <body>
                 <table border="1" width="400">
                             <tr>
                                    <th align="left">消费项目</th>
                                    <th align="right">一月</th>
                                    <th align="right">二月</th>
                             </tr>
                            <tr>
                                    <td align="left">衣服</td>
                                    <td align="right">¥251.10</td>
                                    <td align="right">¥51.10</td>
                            </tr>
                            <tr>
                                    <td align="left">生活用品</td>
                                    <td align="right">¥210.10</td>
                                    <td align="right">¥80.10</td>
                            </tr>
                            <tr>
                                    <td align="left">食物</td>
                                    <td align="right">¥600.10</td>
                                    <td align="right">¥730.10</td>
                            </tr>
                            <tr>
                                    <th align="left">总计</th>
                                    <th align="right">1061.30</th>
                                    <th align="right">861.30</th>
                            </tr>
                 </table>
         </body>
</html>

width是宽度的意思,在表格头部写入。

align是对齐的意思,left是向左对齐,right是向右对齐。

这样看起来就有顺序,不会乱七八糟了。

<!doctype html>
<html>
      <head>
             <meta charset="utf-8">
             <title>可移动的框架</title>
      </head>
      <body>
             <p>”frame“属性来控制围绕表格的边框</p>
             <table frame="box">
                    <tr>
                           <th>姓名</th>
                           <th>零花钱</th>
                    </tr>
                    <tr>
                           <td>金正恩</td>
                           <td>¥100</td>
                    </tr>
             </table>
             <p>box是完整的框架的属性值</p>
             <table frame="above">
                    <tr>
                          <td>普京</td>
                          <td>¥100</td>
                    </tr>
                    <tr>
                          <td>奥巴马</td>
                          <td>¥100</td>
                    </tr>
             </table>
             <p>above是框架在上的意思</p>
             <table frame="below">
                    <tr>
                         <td>叶良辰</td>
                         <td>¥100</td>
                    </tr>
                    <tr>
                         <td>王思聪</td>
                         <td>¥100</td>
                    </tr>
             </table>
             <p>below是框架在下的意思</p>
             <table frame="hsides">
                   <tr>
                         <td>罗玉凤</td>
                         <td>¥100</td>
                   </tr>
                   <tr>
                         <td>犀利哥</td>
                         <td>¥100</td>
                   </tr>
             </table>
             <p>hsides是上下两框架的意思</p>
             <table frame="vsider">
                   <tr>
                         <td>至尊宝</td>
                         <td>¥100</td>
                   </tr>
                   <tr>
                         <td>紫霞</td>
                         <td>¥100</td>
                   </tr>
             </table>
             <p>vsider是框架在左右的意思</p>
      </body>
</html>

 

  

posted on 2015-10-19 17:45  良1  阅读(237)  评论(0编辑  收藏  举报