html基础-4-表格及单元格合并

表格

table：定义一个表格
tr(table row)：表格的行
td(table data)：表格的单元格，类似列
因此，想要几行就写几个tr，想要每行中有几个单元格就写几个td，例如2行3列的表格

<table>
        <tr>
            <td>姓名td>
            <td>年龄td>
            <td>技能td>
        tr>
        <tr>
            <td>二娃td>
            <td>6td>
            <td>喷火td>
        tr>
        <tr>
            <td>三娃td>
            <td>6td>
            <td>喷水td>
        tr>
    table>

我们的表格常常由表头和主体组成，为了结构更加清晰，可以使用：
th（table head）将第一行的所有td替换来表示表头，将首行默认加粗居中显示

<table>
        <tr>
            <th>姓名th>
            <th>年龄th>
            <th>技能th>
        tr>
        <tr>
            <td>二娃td>
            <td>6td>
            <td>喷火td>
        tr>
        <tr>
            <td>三娃td>
            <td>6td>
            <td>喷水td>
        tr>
    table>

由于表格具有默认样式，所以这里看不来跟普通表格有什么相似的，下面通过表格的样式设置，改变外形：

属性	属性值	功能
width/height	像素	表格宽/高
border	像素	表格边框线大小
cellspacing	像素	单元格之间的距离
cellpadding	像素	单元格内容到边的大小
align	center/left/right	表格相对周围元素的位置/左/右对齐

• 表格的样式设置写在table中（这是非常简单粗暴的方法，仅作示例，后续学了css，通过css设置）

<table width="300px" height="200px" border="1px" align="center" cellspacing="0px" cellpadding="2px">
        <tr>
            <th>姓名th>
            <th>年龄th>
            <th>技能th>
        tr>
        <tr>
            <td>二娃td>
            <td>6td>
            <td>喷火td>
        tr>
        <tr>
            <td>三娃td>
            <td>6td>
            <td>喷水td>
        tr>
table>

完整表格语义标签

一个更加完整的表格语义标签还包括
thead表格的表头
tbody表格的主体
在表格主体中由行tr和单元格td构成

合并单元格

rowspan跨行合并单元格
colspan跨列合并单元格

• 第一步：确定是跨行还是跨列合并，如果是跨行合并，则找到待合并的第一个行单元格：例如这里想合并第1列的2-3行，则在‘二娃’位置的td中写上rowspan=2表示想要合并的行数；如果是跨列合并，则找到待合并的第一个列单元格：例如这里想合并第1列的2-3行，则在‘年龄’位置的td中写上colspan=2表示想要合并的列数；
• 第二步：删掉已经合并过的单元格，例如这里‘三娃’和‘技能’的单元格因为已经被合并所以应该删掉

<table width="300px" height="200px" border="1px" align="center" cellspacing="0px" cellpadding="2px">
        <tr>
            <th>姓名th>
            <th colspan="2">属性th>

        tr>
        <tr>
            <td rowspan="2">葫芦娃td>
            <td>6td>
            <td>喷火td>
        tr>
        <tr>

            <td>5td>
            <td>喷水td>
        tr>
    table>