• HTML 表格入门


    每个表格都是由 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>

      

  • 相关阅读:
    Alert弹出框处理
    python自动化测试
    is_selected()检查是否选中该元素
    is_enabled()检查元素是否可以编辑 如文本框
    is_displayed()检查元素是否可见
    text获取元素的文本
    back()是返回,也就是说,先加载地址到A页面,再打开页面到B页面,调用 back()方法,就返回到了A页面
    pyinstaller实现将python程序打包成exe文件
    读写excel文档
    操控MySQL数据库
  • 原文地址:https://www.cnblogs.com/liang1/p/4892528.html
Copyright © 2020-2023  润新知