html基础学习(表格)(二)

    技术2022-07-15  54

    表格基本结构

    表格其实就是很多的小单元格,而这些小单元格很有次序的排列着,它们有很多行,很多列。这些很多行列组成的东西,就叫表格,表格是<table>标签来定义的。而<table>标签中的行就是<tr>标签,而列就是<td>标签,必须先定义行才能定义列。因为html中,每一列是在一行当中的。

    表格描述<table>定义表格<caption>定义表格标题<th>定义表格的表头<tr>定义表格的行<td>定义表格的单元<thead>定义表格的页眉<tbody>定义表格的主体<tfoot>定义表格的页脚<col>定义表格的列属性

    基本表格用法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>企业员工通讯录</title> </head> <body> <table border="1" cellspacing="0" cellpadding="20" width="1000"> <caption>企业员工通讯录</caption> <tr> <th>姓名</th> <th>电话</th> <th>电子邮箱</th> <th>职务</th> </tr> <tr align="center"> <td>张三</td> <td>18278305487</td> <td>zhang@qq.com</td> <td>研发工程师</td> </tr> <tr align="center"> <td>王二</td> <td rowspan="2">12356843687</td> <td>wang@qq.com</td> <td>研发经理</td> </tr> <tr align="center"> <td>李四</td> <td>li@qq.com</td> <td>研发工程师</td> </tr> <tr align="center"> <td colspan="2">李四</td> <td>li@qq.com</td> <td>研发工程师</td> </tr> </table> </body> </html>

    效果如下图

    表格属性 

     

     

     

    Processed: 0.016, SQL: 9