首页 > 代码库 > 第三天--html表格
第三天--html表格
<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<meta http-equive="refresh" content="30">
<title>第三天（html表格）</title>
</head>
<body>
<table border="1"><!--border="1"意思是每个格子包括外面的大盒子都有像素为1的边框-->
<tr>
<th>这是头部第一行，第一格</th>
<th>这是头部第一行，第二格</th>
<!--<th>标签代表表格头部-->
</tr>
<tr>
<td>这是第一行，第一格</td>
<td>这是第一行，第二格</td>
</tr>
<tr>
<td>这是第二行，第一格</td>
<td>这是第二行，第二格</td>
</tr>
</table>
<table><!--如果不定义边框则没有边框，但大多数都是要定义边框的-->
<tr>
<th>这是头部第一行，第一格</th>
<th>这是头部第一行，第二格</th>
<!--<th>标签代表表格头部-->
</tr>
<tr>
<td>这是第一行，第一格</td>
<td>这是第一行，第二格</td>
</tr>
<tr>
<td>这是第二行，第一格</td>
<td>这是第二行，第二格</td>
</tr>
</table>
<!--带有标题的表格-->
<table>
<caption style="text-align:left;font-weight:bold">我是表格标题</caption><!--<caption>标签写在table中用来定义表格标题-->
<tr>
<td>这是第一行，第一格</td>
<td>这是第一行，第二格</td>
</tr>
<tr>
<td>这是第二行，第一格</td>
<td>这是第二行，第二格</td>
</tr>
</table>
<!--单元格跨两格（即单元格夸两行）-->
<table border=“1” >
<tr align="center"><!--其中align="center"放在tr中是为了让单元格内的字居中，若是放在table标签中则是整个表格居中-->
<td>这是第一行，第一格</td>
<td colspan="2">我自己占据两个格子</td>
</tr>
<tr>
<td>这是第二行，第一格</td>
<td>这是第二行，第二格</td>
<td>这是第二行，第三格</td>
</tr>
</table>
<!--colspan="2"中的“2”就是占据几个单元格的数值，上一个行的表格占有几个单元格，下面几行就要有几个单元格来撑，不然不显示占据两个单元格的效果-->
<!--单元格跨两列-->
<table border=“1” style="margin-top:30px">
<tr>
<td rowspan="3">我自己占三列</td>
<td>这是第二行，第三格</td>
</tr>
<tr>
<td>这是第二行，第三格</td>
</tr>
</table>
<!--单元格跨三列-->
<table border=“1” style="margin-top:30px">
<tr>
<td rowspan="3">我自己占三列</td>
<td>这是第二行，第三格</td>
</tr>
<tr>
<td>这是第二行，第三格</td>
</tr>
<tr>
<td>这是第二行，第三格</td>
</tr>
</table>
<!--rowspan="2"中的“2”就是占据几列的数值，详解与占据两个单元格类似，特别注意：占据列的时候在本列中要单独有个与之同一列中，为了是往后占位达到效果-->
<!--表格内添加东西-->
<table border=“1” style="margin-top:30px">
<tr>
<td>
<p>这是段落一</p>
<p>这是段落二</p>
</td>
<td>这个单元格内包含一个表格：
<table border="1">
<tr>
<td>一</td>
<td>二</td>
</tr>
<tr>
<td>三</td>
<td>四</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
这个单元格包含一个列表：
<ul>
<li>我是大娃</li>
<li>我是二娃</li>
<li>我是三娃</li>
<li>其他娃还没出来</li>
</ul>
</td>
<td>
这里可以加个图片：
<img src="http://www.mamicode.com/img.jpg" alt="这是图片" title="图片" style="display:block">
<!--其中的display：block样式是将图片行内元素强制转化为块级元素-->
</td>
</tr>
</table>
<!--带有thead、tbody、tfoot的表格，不加这三样表格也没有问题，加这三样是为了方便统一改变不同部分的样式-->
<!--加边框是不是好丑？！不加边框就不像表格了，怎么破怎么破！！下面就看看各种小东西吧-->
<table border=“1” style="margin-top:30px" rules="all" bordercolor="red">
<!-- rules="rows"去掉竖线，rules="cols"去掉横线，rules="all"去掉双边匡，留下横竖线，rules="grounps"是每个单元格都显示边框,
bordercolor="red"控制所有边框为红色
border-collapse属性是合并边框，切只能写在style里面，他不是表格自带的属性，是样式属性
-->
<thead>
<tr>
<th>页眉一</th>
<th>页眉二</th>
</tr>
</thead>
<tbody style="border:1px solid blue"><!--这里定义表格体部分的外边框颜色，把上面的border边框颜色覆盖掉了.注意：这个单独定义边框的必须写在样式中-->
<tr>
<td>这是内容</td>
<td>这是内容</td>
</tr>
<tr>
<td>这是内容</td>
<td>这是内容</td>
</tr>
</tbody>
<tfoot bgcolor="pink"><!--bgcolor是表格自带的属性，用来设置表格背景颜色-->
<tr>
<td>这是底部</td>
<td>这是底部</td>
</tr>
</tfoot>
</table>
</body>
</html>
第三天--html表格