ホームページ > 記事 > ウェブフロントエンド > H5 学習の旅 - H5 フォーム (7)
H5 学習の旅 - H5 フォーム (7)
- 黄舟オリジナル
- 2017-02-17 14:27:221819ブラウズ
表格语法
table：简历表格
captian：表格标题
th：表格行表头
tr：表格行
td:单元格
thead：表格页眉
tfoot：表格页脚
tbody:表格主体
col：列属性
！！！代码实例
带标题的表格
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>H5表格</title></head><body>
<p>表格</p>
<table border="1">
<caption>表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table></body></html>效果图
带标签的表格
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>H5表格</title></head><body>
<p>表格</p>
<table border="1">
<caption>表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<td>
<ul>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
</ul>
</td>
<td>我要吃药</td>
</tr>
</table></body></html>效果图
单元格内边距
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>H5表格</title></head><body>
<p>表格</p>
<table border="1">
<caption>表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
</table>
<br/>
<table border="1" cellpadding="10">
<caption>表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
</table></body></html>效果图
单元格外边距
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>H5表格</title></head><body>
<p>表格</p>
<table border="1">
<caption>表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
</table>
<br/>
<table border="1" cellspacing="10">
<caption>表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
</table></body></html>效果图
设置单元格背景颜色是bgcolor，设置背景图片是background
表格语法
table：简历表格
captian：表格标题
th：表格行表头
tr：表格行
td:单元格
thead：表格页眉
tfoot：表格页脚
tbody:表格主体
col：列属性
！！！代码实例
带标题的表格
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>H5表格</title></head><body>
<p>表格</p>
<table border="1">
<caption>表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table></body></html>效果图
带标签的表格
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>H5表格</title></head><body>
<p>表格</p>
<table border="1">
<caption>表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<td>
<ul>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
</ul>
</td>
<td>我要吃药</td>
</tr>
</table></body></html>效果图
单元格内边距
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>H5表格</title></head><body>
<p>表格</p>
<table border="1">
<caption>表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
</table>
<br/>
<table border="1" cellpadding="10">
<caption>表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
</table></body></html>效果图
单元格外边距
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>H5表格</title></head><body>
<p>表格</p>
<table border="1">
<caption>表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
</table>
<br/>
<table border="1" cellspacing="10">
<caption>表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
</table></body></html>效果图
设置单元格背景颜色是bgcolor，设置背景图片是background
以上就是H5 学习之旅-H5表格（7）的内容，更多相关内容请关注PHP中文网（www.php.cn）！
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。