html 表格

最新推荐文章于 2024-09-21 11:29:05 发布

Red youth

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量59

点赞数 1

文章标签：前端 css

本文链接：https://blog.csdn.net/nnnnnni/article/details/126819552

版权

本文介绍了HTML表格的正确使用方式，强调表格的主要作用是用于数据展示，而非页面布局。详细讲解了表格的基本元素如<table>、<tr>和<td>，以及表头单元格<th>的用法。此外，还探讨了如何通过colspan和rowspan属性进行单元格的跨行和跨列合并，以实现更复杂的表格布局。

摘要由CSDN通过智能技术生成

表格

1.表格不是用来布局页面的，而是用来展示数据的

 <table>
    <tr>
        <td>姓名</td><td>性别</td><td>年龄</td>
    </tr>
    <tr>
        <td>迪丽热巴</td><td>女</td><td>26</td>
    </tr>
    <tr>
        <td>汤姆</td><td>男</td><td>35</td> 
    </tr>
    <tr>
        <td>tm</td><td>男</td><td>8</td>
    </tr>
 </table>

     
    table：适用于定义表格的标签
    tr：标签用于定义表格的行，必须嵌套在table标签中
    td：表格数据（table date）数据单元格的内容

这些属性要写到表格标签table里面去

<table align="center" border="1" cellpadding = "10" cellspacing = "0" width = "500" height = "250">
    <tr>
        表头单元格也是单元格，常用于表格第一行，突出重要性
        表头单元格里面的文字会加粗居中显示
        <th>姓名</th><th>性别</th><th>年龄</th>
    </tr>
    <tr>
        <td>vn</td><td>女</td><td>26</td>
    </tr>
    <tr>
        <td>vn</td><td>女</td><td>26</td>
    </tr>
</table>

合并表格

跨行：最上册单元格为目标单元格，写合并代码跨列：最左侧单元格为目标单元格，写合并代码

colspan:合并列 rowspan:合并行合并单元格 1.先确定是跨行还是跨列 2.找到目标单元格，写上合并方式 = 合并的单元格数量，比如：<td colspan = “2"></td> 3.删除多余单元格

<table width = "500" height = "250" border="1" cellspacing = "0">
    <tr>
       <td></td>
        合并列2
        <td colspan="2"></td>
    </tr>
    <tr>
        合并行2
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
  </table>dd