您的位置:首页> 前端教程> HTML教程
文章导航

HTML <table>表格概述

2018-8-15 10:40| 作者: admin| 查看: 1427| 评论: 0|来自: 蚂蚁部落

使用<table>可以创建一个表格,图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201808/15/104139gauwh3wy73kgbvbu.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

上面图示的代码如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部