HTML之表格
程序员文章站
2022-06-03 08:17:17
表格: 表格由 标签来定义。每个表格均有若干行(由
标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。border是边框属性。 ......
表格: 表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。border是边框属性。 <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> 运行结果: 表格标签:
表格形式: 1.无边框表格 第一种: 2.表头 水平标题: <table border="1"> <tr> <th>表头一</th> <th>表头二</th> <th>表头三</th> </tr> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> 垂直标题: <table border="1"> <tr> <th>表头一</th> <td>100</td> </tr> <tr> <th>表头二</th> <td>200</td> </tr> <tr> <th>表头三</th> <td>300</td> </tr> </table> 运行结果:
3.标题 <table border="1"> <caption>标题</caption> <tr> <th>表头一</th> <td>100</td> </tr> <tr> <th>表头二</th> <td>200</td> </tr> <tr> <th>表头三</th> <td>300</td> </tr> </table> 运行结果:
4.跨行跨列的表格单元格( 合并单元格: ) <table border="1"> <tr> <th>表头一</th> <th colspan="2">表头二</th> </tr> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <table border="1"> <tr> <th>表头一</th> <td>100</td> </tr> <tr> <th rowspan="2">表头二</th> <td>200</td> </tr> <tr> <td>300</td> </tr> </table> 运行结果:
5.表格内的标签 <table border="1"> <tr> <td> <p>这是一个段落</p> <p>这是另一个段落</p> </td> <td>这个单元格包含一个表格: <table border="1"> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>c</td> <td>d</td> </tr> </table> </td> </tr> <tr> <td>这个单元格包含一个列表 <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>hello</td> </tr> </table> 运行结果:
6.单元格边距, cellpadding="0" 边距(内容和单元格的距离) <h4>没有单元格边距:</h4> <table border="1"> <tr> <td>first</td> <td>row</td> </tr> <tr> <td>second</td> <td>row</td> </tr> </table> <h4>有单元格边距:</h4> <table border="1" cellpadding="10"> <tr> <td>first</td> <td>row</td> </tr> <tr> <td>second</td> <td>row</td> </tr> </table> 运行结果: 没有单元格边距:
有单元格边距:
7.单元格间距, cellspacing="0" 间距(单元格与单元格的距离 <h4>没有单元格间距:</h4> <table border="1"> <tr> <td>first</td> <td>row</td> </tr> <tr> <td>second</td> <td>row</td> </tr> </table> <h4>单元格间距="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>单元格间距="10":</h4> <table border="1" cellspacing="10"> <tr> <td>first</td> <td>row</td> </tr> <tr> <td>second</td> <td>row</td> </tr> </table> 运行结果: 没有单元格间距:
单元格间距="0":
单元格间距="10":
上一篇: 气血不足有哪些症状? 生活中如何不足气血 下一篇: 你的睡姿正确吗? 侧着睡竟能清理大脑垃圾 推荐阅读
|