1 表格
以前网站都是 table 布局, 现在是 div+CSS 布局, 但是表格现在也很重要. 在做网页的时候用的很多
注意一下表格是没列元素的
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <base target="_blank_" />
- </head>
- <body>
- <table width="500" border="1">
- <tr>
- <td>
- 姓名
- </td>
- <td>
- 性别
- </td>
- <td>
- 电话
- </td>
- </tr>
- <tr>
- <td>
- 小王
- </td>
- <td>
- 女
- </td>
- <td>
- 110
- </td>
- </tr>
- <tr>
- <td>
- 小名
- </td>
- <td>
- 男
- </td>
- <td>
- 110
- </td>
- </tr>
- </table>
- </body>
- </HTML>
View Code
2, 居中表格, center
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <base target="_blank_" />
- </head>
- <body>
- <table width="500" border="1" align="center" cellspacing="10">
- <tr>
- <td>
- 姓名
- </td>
- <td>
- 性别
- </td>
- <td>
- 电话
- </td>
- </tr>
- <tr>
- <td>
- 小王
- </td>
- <td>
- 女
- </td>
- <td>
- 110
- </td>
- </tr>
- <tr>
- <td>
- 小名
- </td>
- <td>
- 男
- </td>
- <td>
- 110
- </td>
- </tr>
- </table>
- </body>
- </HTML>
View Code
3, 单元格和单元格的距离
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <base target="_blank_" />
- </head>
- <body>
- <table width="500" border="1" align="center" cellspacing="10">
- <tr>
- <td>
- 姓名
- </td>
- <td>
- 性别
- </td>
- <td>
- 电话
- </td>
- </tr>
- <tr>
- <td>
- 小王
- </td>
- <td>
- 女
- </td>
- <td>
- 110
- </td>
- </tr>
- <tr>
- <td>
- 小名
- </td>
- <td>
- 男
- </td>
- <td>
- 110
- </td>
- </tr>
- </table>
- </body>
- </HTML>
View Code
4,cellpadding, 单元格内容距离单元格边框的距离
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <base target="_blank_" />
- </head>
- <body>
- <table width="500" border="1" align="center" cellspacing="10" cellpadding="5">
- <tr>
- <td>
- 姓名
- </td>
- <td>
- 性别
- </td>
- <td>
- 电话
- </td>
- </tr>
- <tr>
- <td>
- 小王
- </td>
- <td>
- 女
- </td>
- <td>
- 110
- </td>
- </tr>
- <tr>
- <td>
- 小名
- </td>
- <td>
- 男
- </td>
- <td>
- 110
- </td>
- </tr>
- </table>
- </body>
- </HTML>
View Code
5, 三参为 0,border,cellpadding,cellpacing
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <base target="_blank_" />
- </head>
- <body>
- <table width="300" border="0" align="center" cellspacing="0" cellpadding="0">
- <tr>
- <td>
- 姓名
- </td>
- <td>
- 性别
- </td>
- <td>
- 电话
- </td>
- </tr>
- <tr>
- <td>
- 小王
- </td>
- <td>
- 女
- </td>
- <td>
- 110
- </td>
- </tr>
- <tr>
- <td>
- 小名
- </td>
- <td>
- 男
- </td>
- <td>
- 110
- </td>
- </tr>
- </table>
- </body>
- </HTML>
View Code
6, 居中
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <base target="_blank_" />
- <style>
- tr { text-align: center; }
- </style>
- </head>
- <body>
- <table width="300" border="1" align="center" cellspacing="0" cellpadding="0">
- <tr>
- <td>
- 姓名
- </td>
- <td>
- 性别
- </td>
- <td>
- 电话
- </td>
- </tr>
- <tr>
- <td>
- 小王
- </td>
- <td>
- 女
- </td>
- <td>
- 110
- </td>
- </tr>
- <tr>
- <td>
- 小名
- </td>
- <td>
- 男
- </td>
- <td>
- 110
- </td>
- </tr>
- </table>
- </body>
- </HTML>
View Code
7, 表头标签
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <base target="_blank_" />
- <style>
- tr { text-align: center; }
- </style>
- </head>
- <body>
- <table width="300" border="1" align="center" cellspacing="0" cellpadding="0">
- <tr>
- <th>
- 姓名
- </th>
- <th>
- 性别
- </th>
- <th>
- 电话
- </th>
- </tr>
- <tr>
- <td>
- 小王
- </td>
- <td>
- 女
- </td>
- <td>
- 110
- </td>
- </tr>
- <tr>
- <td>
- 小名
- </td>
- <td>
- 男
- </td>
- <td>
- 110
- </td>
- </tr>
- </table>
- </body>
- </HTML>
View Code
8, 表格标题
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <base target="_blank_" />
- <style>
- tr { text-align: center; }
- </style>
- </head>
- <body>
- <table width="300" border="1" align="center" cellspacing="0" cellpadding="0">
- <caption>
- 个人信息表
- </caption>
- <tr>
- <th>
- 姓名
- </th>
- <th>
- 性别
- </th>
- <th>
- 电话
- </th>
- </tr>
- <tr>
- <td>
- 小王
- </td>
- <td>
- 女
- </td>
- <td>
- 110
- </td>
- </tr>
- <tr>
- <td>
- 小名
- </td>
- <td>
- 男
- </td>
- <td>
- 110
- </td>
- </tr>
- </table>
- </body>
- </HTML>
View Code
9, 表格结构
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- <base target="_blank_" />
- <style>
- tr { text-align: center; }
- </style>
- </head>
- <body>
- <table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
- <caption>
- <h3>
- 小说排行榜
- </h3>
- </caption>
- <thead>
- <tr>
- <th>
- 排行
- </th>
- <th>
- 关键词
- </th>
- <th>
- 今日搜索
- </th>
- <th>
- 最近七日
- </th>
- <th>
- 相关连接
- </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- 1
- </td>
- <td>
- 鬼吹灯
- </td>
- <td>
- 110
- </td>
- <td>
- 990
- </td>
- <td>
- <a href="#">
- 贴吧
- </a>
- <a href="#">
- 图片
- </a>
- <a href="#">
- 百科
- </a>
- </td>
- </tr>
- <tr>
- <td>
- 1
- </td>
- <td>
- 鬼吹灯
- </td>
- <td>
- 110
- </td>
- <td>
- 990
- </td>
- <td>
- <a href="#">
- 贴吧
- </a>
- <a href="#">
- 图片
- </a>
- <a href="#">
- 百科
- </a>
- </td>
- </tr>
- <tr>
- <td>
- 1
- </td>
- <td>
- 鬼吹灯
- </td>
- <td>
- 110
- </td>
- <td>
- 990
- </td>
- <td>
- <a href="#">
- 贴吧
- </a>
- <a href="#">
- 图片
- </a>
- <a href="#">
- 百科
- </a>
- </td>
- </tr>
- <tr>
- <td>
- 1
- </td>
- <td>
- 鬼吹灯
- </td>
- <td>
- 110
- </td>
- <td>
- 990
- </td>
- <td>
- <a href="#">
- 贴吧
- </a>
- <a href="#">
- 图片
- </a>
- <a href="#">
- 百科
- </a>
- </td>
- </tr>
- <tr>
- <td>
- 1
- </td>
- <td>
- 鬼吹灯
- </td>
- <td>
- 110
- </td>
- <td>
- 990
- </td>
- <td>
- <a href="#">
- 贴吧
- </a>
- <a href="#">
- 图片
- </a>
- <a href="#">
- 百科
- </a>
- </td>
- </tr>
- <tr>
- <td>
- 1
- </td>
- <td>
- 鬼吹灯
- </td>
- <td>
- 110
- </td>
- <td>
- 990
- </td>
- <td>
- <a href="#">
- 贴吧
- </a>
- <a href="#">
- 图片
- </a>
- <a href="#">
- 百科
- </a>
- </td>
- </tr>
- </tbody>
- </table>
- </body>
- </HTML>
View Code
来源: http://www.bubuko.com/infodetail-2998431.html