表格的基本用法
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=”14:43″>
<input type=”email”>
<button type=”submit”>提交</button></form>
</body></html>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/12183.html