HTML表格布局

发表于 | 分类于

HTML表格

  • 标签：
表格标签 含义
<table></table> 定义表格
<caption></caption> 定义表格标题
<th></th> 定义表格表头
<tr></tr> 定义表格的行
<td></td> 定义表格的单元
<thead></thead> 定义表格的页眉
<tbody></tbody> 定义表格的主体
<tfoot></tfoot> 定义表格的页脚
<col span=""> 定义表格的列属性
  • 页面效果：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table border="1" cellpadding="10">      //border:表格边框
    <caption>表格标题</caption>           //cellpadding：单元格边距
     <tr>                              //`<caption>`  表格的标题
         <th>单元</th>
         <th>单元</th>                  //`<th>`  表头，加粗效果
         <th>单元</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
</table>

GitHub set up
表格内列表：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table border="1" cellspacing="10">           // cellspacing: 单元格间距
    <caption>表格标题</caption>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>
            <ul>
                <li>L1</li>
                <li>L2</li>              //<ul><li></li></ul>列表标签
                <li>L3</li>
            </ul>
        </td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
</table>

GitHub set up

HTML列表

标签：

<ol>有序列表 <ul>无序列表
<li>列表项 <dl>列表
<dt>列表项 <dd>描述

  • 无序列表：

    使用标签：<ul>,<li>
    属性：type=”disc–实心圆;circle– 空心圆 ;square–实心方块”
    列表也可横向排列 ，用CSS样式

  • 有序列表：

    使用标签：<ol>,<li>
    属性type=”A–>A,B,C,D ;a–>a,b,c,d ; I –>I,II,III,IV ;i–> i,ii,iii,iv
    默认为数字start 属性可以设置从几开始

  • 嵌套列表：

    使用标签：<ul>,<ol>,<li>
    GitHub set up

    1
    2
    3
    4
    5
    6
    7
    <ul>
        <li>宠物</li>
            <ul>
                <li>猫</li>             // <ul>无序列表嵌套
                <li>狗</li>
            </ul>
    </ul>

  • 自定义列表：

    使用标签：<dl>,<dt>,<dd>
    GitHub set up

    1
    2
    3
    4
    5
    6
    <dl>
        <dt>helloworld</dt>
            <dd>描述helloworld</dd>
        <dt>helloworld</dt>
            <dd>描述helloworld</dd>
    </dl>

HTML块

  • 块元素：

    块元素在显示时，通常以新行开始
    例：<h1>,<p>,<ul>,<div>
    <div>元素：布局，配合css使用,给div标签设置一个id属性，然后在css文件中设置div样式,在头文件中<link>引入css文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .css中：
    #divid p{
        color:red;                 //设置id为divid的标签中的 p元素的颜色
    }
    .html中：
    <head>
        <link rel="stylesheet" type="text/css" href="mycss.css">
    </head>
    <body>
        <div id="divid">
            <p>helloworld!</p>
        </div>
    </body>

  • 内联元素：

    内联元素通常不会以新行开始
    例：<b>,<a>,<img>,<span>
    <span>元素：是内联元素，可作为文本的容器,可在其中定义文字样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style type="text/css">
        span{
            color:red;
        }
    </stye>
    <div id="divspan">
          <p><span>span效果</span>这里没有span效果</p>
    </div>

HTLM布局

  • 使用div布局

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
        <style type="text/css" media="screen">
            /* margin 边距宽度 */
            body{
                margin: 0px;
            }
            /* width的值可以为百分比，但是height的值不能为百分比*/
            div#container{
                width:100%;
                height: 950px;
                background-color: red;
            }
            /* 此处的height能够定义成百分比是因为总div已经定义了高度 */
            div#heading{
                width: 100%;
                height: 10%;
                background-color: aqua;
            }
            /* 页面左半部分 float 设置浮动*/
            div#content_menu{
                width: 30%;
                height: 50%;
                background-color: aquamarine;
                float: left;
            }
            /* 页面右半部分*/
            div#content_body{
                width: 70%;
                height: 50%;
                background-color: blueviolet;
                float: right;
            }
            /* 页面底部，需要清除浮动 */
            div#footing{
                width: 100%;
                height: 40%;
                background-color: black;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="heading">头部 </div>
            <div id="content_menu">内容左侧</div>
            <div id="content_body">内容右侧 </div>
            <div id="footing">底部 </div>
        </div>

  • 页面效果：
    GitHub set up

  • 使用table布局

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <body marginheight="0px" marginwidth="0px">
        <table width="100%" height="950px" style="background-color:blue">
            <!-- colspan 两个单元格合并为一个-->
            <tr>
                <td colspan="2" width="100%" height="10%" style="background-color:aqua">头部</td>
            </tr>
            <tr>
                <td  width="30%" height="50%" style="background-color:blue">左菜单</td>
                <td  width="70%" height="50%" style="background-color:blueviolet">右菜单</td>
            </tr>
            <tr>
                <td colspan="2" width="100%" height="40%" style="background-color:darkcyan">底部</td>
            </tr>
        </table>
    </body>

  • 页面效果：
    GitHub set up