table 标签讲解

原创 2018-11-16 17:13:09 254
摘要:<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>table</title><style type="text/css&

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>table</title>


<style type="text/css">

 *{margin:0px;padding:0px;}

 table{width:300px;

       border:1px solid red;

       border-collapse:collapse;/* 合并表格多余的边框 常用 */

}

tr td{

border:1px solid green;

height:100px;

text-align:center;

}

tr th{

border:1px solid green;

height:100px;

text-align:left;

}

</style>

</head>

<body>

    <table>

       <tr>

          <th>1</th>

          <th>2</th>

          <th>3</th>

       </tr>

       <tr>

          <td colspan="3">合并了3列</td>

          

       </tr> 

       <tr>

          <td rowspan="2">合并了2行</td>

          <td>2</td>

          <td>3</td>

       </tr> 

       <tr>

         

          <td>2</td>

          <td>3</td>

       </tr> 

   

    </table>

</body>


 <!-- 一般不给table标签高度 让tr、td去撑开  td一般不给宽度属性 -->



</html>


批改老师:灭绝师太批改时间:2018-11-16 17:49:08
老师总结:给也没有关系啦,后面table在布局中的应用场景不是特别多……完成的不错加油

发布手记

热门词条