详解HTML中的表格标签

xiaoxiao2021-02-28  52

详细代码如下:

<!DOCTYPE html>

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表格制作</title> </head> <body> <table bgcolor="black" width="500px"> <caption style="bold">学生信息</caption>              <thead>    <tr bgcolor="#a9a9a9" height="50px">    <th>姓名</th> <th>年龄</th> <th>学校</th> <th>考试成绩</th> <th>喜欢水果</th> <th>经常上的网站</th>    </tr> </thead> <tbody> <tr bgcolor="white" align="center" height="30px"> <td align="left">张三</td> <td>22</td> <td>西安工业大学</td> <td>87</td> <td>桃子</td> <td> <a href="http://www.baidu.com/">百度 </a>    <a href="http://www.sina.com/">新浪</a> </td> </tr> <tr bgcolor="white" align="center"> <td align="left">李四</td> <td>23</td> <td rowspan="2">上海交通大学</td> <td>85</td> <td>苹果</td> <td> <a href="https://www.taobao.com/">淘宝 </a> <a href="https://www.jd.com/">京东</a> </td> </tr> <tr bgcolor="white" align="center"> <td align="left">王刚</td> <td>45</td> <!-- <td>上海海洋大学</td> -->   <td>86</td> <td>香蕉</td> <td> <a href="http://www.163.com/">网易</a> <a href="http://www.sina.com/">新浪</a> </td> </tr> </tbody> <tfoot>  <tr bgcolor="white">   <td >总分</td>   <td></td>   <td></td>   <td align="center">258</td>   <td></td>   <td></td>  </tr> </tfoot> </table> </body>

</html>

注意事项:

1.宽度和高度属性   可以给table和td标签使用 2.水平对齐和垂直对齐    水平对齐可以给table和td使用    垂直对齐只能给tr和td标签使用 3.外边距和内边距属性    只能给table使用 4.表格分类   表格的标题   表格的表头信息   表格的主题信息   表格的叶尾信息 //必须写在table标签中,紧跟在table后面 5.单元格合并(添加td属性)    colspan="x"水平合并X个单元格,同时删除多余的    rowspan="x"垂直合并X个单元格,同时删除多余的    单元格都是向后或者想下合并的

转载请注明原文地址: https://www.6miu.com/read-600104.html

最新回复(0)