HTML之表格标签

目录

为什么要使用表格？

表格标签

table标签

td标签

如何做细线表格？

---

为什么要使用表格？

答：因为表格简单通用、结构稳定。

表格标签

<table>                       table代表表格
        <tr>                  tr是行标签
            <th></th>         
            <th></th>
            <th></th>         th是表头标签(一般是表头中的内容会被加黑)
        </tr>
        <tr>
            <td></td>         td是列标签
            <td></td>
            <td></td>
        </tr>
</table>

           简单的 HTML 表格由 table 元素以及一个或多个 <tr>、<th> 或 <td> 元素组成表格结构；其中： <tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。

table标签

<table border="1px" width="500" height="300px" bgcolor="white">

       table标签可以定义表格，生成的表格在一对<table></table>中。

       注意：border：表格边框样式；width：表格边框宽度；height：表格边框高度；bgcolor：表格背景颜色。

示例：

<table border="1px" width="500" height="300px" bgcolor="white">                       
        <tr>                  
            <th></th>         
            <th></th>
            <th></th>        
        </tr>
        <tr>
            <td></td>         
            <td></td>
            <td></td>
        </tr>

图示：

 

td标签

<td colspan="2" rowspan="2" align="center" valign="middle">2-2</td>

注意：colspan是合并列(即左右方向单元格的合并)，属性值里的数字代表所跨的列数，

rowspan是合并行(即上下方向的单元格合并)，属性值里的数字代表所跨的行数；

align代表内容在表格水平方向的位置，有三个属性值：left(左)、center(中)、right(右) ，

valign代表内容在表格垂直方向的位置，有三个属性值：top(上)、middle(中)、bottom(下) 。

如何做细线表格？

<style>
     table{border-collapse: collapse;}
</style>

我们可以对table表格添加border-collapse: collapse;样式，作用：合并单元格间距。

图示：