========================================= 1、本例将演示如何在HTML文档中创建表格。
代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head>
<body> <h4 color="purple">一行一列:</h4> <table border="1"> <tr> <td>100</td> </tr> </table>
<h4>一行三列:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>三行三列:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> </body> </html> 效果如下图: ========================================= 一、HTML表格 表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 表格实例:
<table border="1"> <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> 在浏览器显示如下:: row 1, cell 1 | row 1, cell 2 | row 2, cell 1 | row 2, cell 2 |
二、HTML 表格和边框属性 如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。 使用边框属性来显示一个带有边框的表格: <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</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> 在浏览器显示如下: Header 1 | Header 2 |
---|
row 1, cell 1 | row 1, cell 2 | row 2, cell 1 | row 2, cell 2
|
========================================= 实例1:没有边框的表格 代码: <!DOCTYPE html> <html> <body> <h4>This table has no borders:</h4> <table> <tr> <td>100</td> <td>100</td> <td>100</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <h4>And this tablehas no borders:</h4> <table border="0"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> </body> </html>
效果如图:
实例2:如何显示表格标头 代码: <!DOCTYPE html> <html> <body> <h4>Table headers:</h4> <table border="1"> <tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Vertical headers:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone</th> <td>555 55 855</td> </tr> <tr> <th>Telephone</th> <td>555 55 857</td> </tr> </table> </body> </html> 效果如图:
实例3:创建一个带标题的表格 代码: <!DOCTYPE html> <html> <body> <table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Saving</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> </body> </html> 效果如下:
实例4:如何定义跨行或跨列的表格单元格 代码: <!DOCTYPE html> <html> <body> <h4>Cell that spans two columns:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 886</td> <td>555 77 888</td> </tr> </table> <h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone</th> <td>555 77 888</td> </tr> <tr> <td>555 77 889</td> </tr> </table> </body> </html> 效果如图: 实例5:如何在不同的单元格内显示不同的元素
代码: <!DOCTYPE html> <html> <body> <table border="1"> <tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>This cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table> </body> </html>
效果如图:
实例6:如何使用 Cell padding 来创建单元格内容与其边框之间的空白。 代码: <!DOCTYPE html> <html> <body> <h4>Without cellpadding:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>With cellpadding</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html> 效果:
实例7:如何使用 Cell spacing 增加单元格之间的距离。 代码: <!DOCTYPE html> <html> <body>
<h4>Without cellspacing:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
<h4>With cellspacing="0":</h4> <table border="1" cellspacing="0"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
<h4>With cellspacing="10":</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
</body> </html>
效果如下: ========================================= HTML 表格标签标签 | 描述 |
---|
<table> | 定义表格 | <th> | 定义表格的表头 | <tr> | 定义表格的行 | <td> | 定义表格单元 | <caption> | 定义表格标题 | <colgroup> | 定义表格列的组 | <col> | 定义用于表格列的属性 | <thead> | 定义表格的页眉 | <tbody> | 定义表格的主体 | <tfoot> | 定义表格的页脚 |
|