HTML 表格登陆

HTML 表格

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

下面是一个例子:

<html>
    <head>
    <meta charset="utf-8"> 
    <title>Table in html</title>
    </head>
    <body>
        <p>水平表头</p>
        <table border="1">
         <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
         </tr>
         <tr>
            <td>zdd</td>
            <td>30</td>
            <td>male</td>
         </tr>
         </table>
         
         <p>垂直表头</p>
         <table border="1">
         <tr>
            <th>Name</th>
            <td>autumn</td>
         </tr>
         <tr>
            <th>Age</th>
            <td>30</td>
         </tr>
         <tr>
            <th>Gender</th>
            <td>famale</td>
         </tr>
        </table>
    </body>
</html>

尝试一下

无边框表格

如果在定义表格时,没有指定border属性,那么表格就没有边框

<table>
   <tr><td>zdd</td><td>30</td></tr>
   <tr><td>ddz</td><td>27</td></tr>
</table>


空单元格

如果没有为单元格指定内容,那么单元格将是空的,且没有边框

如果解决呢?方法是给空的单元格加上空格,由于html忽略多余的空格,所以我们不能直接加空格,而要加 &nbsp; nbsp表示non-breaking space。

<table border="1">
   <tr><td>zdd</td><td>30</td></tr>
   <tr><td>&nbsp;</td>20</tr>
</table>


带标题的表格

使用caption属性,但是好像标题中不能有空格,否则显示的时候会换行!太扯了吧?

<table border="1">
<caption>我的表格</caption>
   <tr><td>zdd</td><td>30</td></tr>
   <tr><td>&nbsp;</td><td>20</td></tr>
</table>

跨行或者跨列表格

用colspan跨行

<table border="1">
<tr><th>姓名</th><th colspan="2">电话</th></tr>
<tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td></tr>
</table>

用rowspan跨列

<table border="1">
<tr><th>姓名</th><td>Bill Gates</td></tr>
<tr><th rowspan="2">电话</th><td>555 77 854</td></tr>
<tr><td>555 77 855</td></tr>
</table>

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本:

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>


下一节
<html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <h4>背景颜色:</h4> <table border="1" bgcolor="yellow"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Tom</td> </tr> </table> </body> </html>
提交重置代码
章节评论笔记课件
  • 取消回复发送
  • 取消发布笔记发送