1.10 表格的使用
一，插入表格并定义表格结构< table>，< tr>,< td>
基本语法：
< table>:定义表结构
< tr>:定义行结构
< td>:定义列结构
实例代码：
<html>
<head>
<title>设置基本表格结构</title>
</head>
<body>
<table width="470" border="1" align="center">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
效果：
二，设置表格标题< caption>
基本语法：
实例代码：
<html>
<head>
<title>插入表格标题</title>
</head>
<body>
<table width="470" border="1" align="center">
<caption align="center">计算机语言</caption>
<tr>
<td>Dreamweaver</td>
<td>Access</td>
<td>C++</td>
</tr>
<tr>
<td>FrontPage</td>
<td>SQL SERVER 2000</td>
<td>C#</td>
</tr>
</table>
</body>
</html>
效果：
三，设置表格表头< th>
基本语法：
实例代码：
<html>
<head>
<title>设置表格表头</title>
</head>
<body>
<table width="470" border="1" align="center">
<tr>
<th>网页设计</th>
<th>数据库开发</th>
<th>程序设计</th>
</tr>
<tr>
<td>Dreamweaver</td>
<td>Access</td>
<td>C++</td>
</tr>
<tr>
<td>FrontPage</td>
<td>SQL SERVER</td>
<td>C#</td>
</tr>
</table>
</body>
</html>
效果：
四，设置表格的宽度和高度
基本语法：
实例代码：
<html>
<head>
<title>设置表格的宽度和高度</title>
</head>
<body>
<table width="470" height="40" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table width="200" height="80" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
效果：
五，设置表格的边框属性
基本语法:
border:边框粗细
bordercolor：边框颜色
实例代码：
<html>
<head>
<title>设置表格的边框属性</title>
</head>
<body>
<table width="470" border="1" bordercolor="#0000FF">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
效果：
六，设置单元格边距与间距
- 间距：< table cellspacing=数值>
- 边距：< table cellpadding=数值>
实例代码：
<html>
<head>
<title>设置单元格间距</title>
</head>
<body>
<table width="380" border="1" cellspacing="0">
<tr>
<td > </td>
<td> </td>
<td> </td>
</tr>
</table>
<table width="380" border="1" cellspacing="5">
<tr>
<td > </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
效果：
七，设置表格背景
基本语法：
实例代码：
<html>
<head>
<title>设置表格的背景</title>
</head>
<body>
<table width="470" border="1" bgcolor="red" align="center">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
效果：
八，设置行内容水平对齐和垂直对齐
基本语法：
实例代码：
<html>
<head>
<title>调整行内容水平和垂直对齐</title>
</head>
<body>
<table border="1">
<tr align="center" height=50 valign="bottom">
<th>网页设计</th>
<th>数据库开发</th>
<th>程序设计</th>
</tr>
<tr align="center" bordercolor=red bgcolor=yellow>
<td>Dreamweaver</td>
<td>Access</td>
<td>C++</td>
</tr>
<tr>
<td>FrontPage</td>
<td>SQL SERVER</td>
<td>C#</td>
</tr>
</table>
</body>
</html>
效果：
九，设置跨行跨列
基本语法：
colspan：跨列
rowspan：跨行
实例代码：
<html>
<head>
<title>设置跨行</title>
</head>
<body>
<table width="380" border="1">
<tr>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
效果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
