首页 > 代码库 > html表格的基本用法
html表格的基本用法
表格的基本用法
1、<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>表格的使用</title></head><body><!--
border:表格的边框
cellspacing：单元格之间的距离
cellpadding：单元格与内容之间的距离
width:代表表格在整个浏览器中的宽度显示
bgcolor:表格的背景色
align:表格中内容的对齐方式-->
<table border="1" cellspacing="0" cellpadding="5" width="100%" bgcolor="#ffc0cb">
<tr align="center">
<td>第1行第1列</td>
<td>第1行第2列</td>
<td>第1行第3列</td>
<td>第1行第4列</td>
</tr>
<tr align="center">
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
<td>第2行第4列</td>
</tr>
</table>
</body></html>
2、<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>高级表格的使用</title></head><body>
<table width="80%" cellspacing="0" cellpadding="0" border="1">
<!--标题-->
<caption>年终数据报表</caption>
<!--页眉-->
<thead bgcolor="yellow">
<!--表头-->
<tr>
<th>月份</th>
<th>收入</th>
</tr>
</thead>
<!--主体-->
<tbody bgcolor="pink">
<tr>
<td>1</td>
<td>1000</td>
</tr>
<tr>
<td>2</td>
<td>2000</td>
</tr>
<tr>
<td>3</td>
<td>3000</td>
</tr>
<tr>
<td>4</td>
<td>4000</td>
</tr>
</tbody>
<!--页脚-->
<tfoot bgcolor="green">
<tr>
<td>平均月收入</td>
<td>4000</td>
</tr>
<tr>
<td>总计</td>
<td>40000</td>
</tr>
</tfoot>
</table></body></html>
3、跨行和跨列
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>表格的跨行跨列</title></head><body><!-- 跨行和跨列 只能在 列中td使用-->
<table width="80%" cellspacing="0" cellpadding="0" border="1">
<tr>
<!--学生成绩跨了3列-->
<td colspan="3">学生成绩</td>
</tr>
<tr>
<!--张三跨了2行-->
<td rowspan="2">张三</td>
<td>语文</td>
<td>85</td>
</tr>
<tr>
<td>数学</td>
<td>85</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>85</td>
</tr>
<tr>
<td>数学</td>
<td>85</td>
</tr>
</table></body></html>
4、iframe内联框架
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title>内联框架</title></head><body><!--
src:需要引入的文件路径
frameborder:是否显示边框 0 不显示 1 显示
scrolling：是否显示下拉框 auto no yes
align:根据周围的元素 这是位置
srcdoc：在内联框架中显示html内容
seamless:默认不显示边框和下拉框
name:内联框架的名称-->
<iframe src="http://www.baidu.com" srcdoc="<h1>哈哈</h1>" align="top">
</iframe>
<iframe src="http://www.baidu.com" seamless="seamless"></iframe>
</body></html>
二、HTML5中的一些基本属性
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8"></head><body><form action="#" method="post">
<input type="number" min="1" max="5">
<input type="date" min="1990-01-01">
<input type="date" max="2016-12-09">
<input type="time" value="http://www.mamicode.com/14:43">
<input type="email">
<button type="submit">提交</button></form>
</body></html>
html表格的基本用法