HTML <table>表格概述-蒲公英云

HTML <table>表格概述

小灰灰 2020-05-16 20:07 1088阅读 0赞

HTML <table>表格概述

使用<table>可以创建一个表格，

之前，表格会用来进行页面布局，但是由于嵌套过于复杂，不利于灵活布局和后期改版，当前已经鲜有使用，不要认为它已经被淘汰，而是被用来做它原本该做的事情，制作表格。

上面图示的代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>table细线表格-蒲公英云</title>
<style type="text/css"> 
#thetable{
  background-color:green;
  font-size:12px;
}
#thetable th{
  text-align:center;
  background-color:#CCF;
  height:30px;
  line-height:30px;
}
#thetable td{
  width:150px;
  height:30px;
  line-height:30px;
  text-align:center;
  background-color:#FFF;
}
</style> 
</head> 
<body> 
<table cellpadding="0" cellspacing="1" id="thetable">
  <tr>
    <th>标题一</th>
    <th>标题二</th>
    <th>标题三</th>
    <th>标题四</th>
  </tr>
  <tr>
    <td>蒲公英云一</td>
    <td>蒲公英云二</td>
    <td>蒲公英云三</td>
    <td>蒲公英云四</td>
  </tr>
  <tr>
    <td>蒲公英云一</td>
    <td>蒲公英云二</td>
    <td>蒲公英云三</td>
    <td>蒲公英云四</td>
  </tr>
  <tr>
    <td>蒲公英云一</td>
    <td>蒲公英云二</td>
    <td>蒲公英云三</td>
    <td>蒲公英云四</td>
  </tr>
</table>
</body> 
</html>