表格table

table中的标签: table、tr、th、td

• table：表格
• tr： 单元行标签
• th：标题标签
• td： 单元

     <table border="1">
        <tr>
            <th>th标题</th>
            <th>th标题</th>
            <th>th标题</th>
        </tr>
        <tr>
            <td>td单元</td>
            <td>td单元</td>
            <td>td单元</td>
        </tr>
        <tr>
            <td>tr表格行</td>
            <td>tr表格行</td>
            <td>tr表格行</td>
        </tr>
    </table>

 

 

---

CSS重置

css的默认样式有间隙等等，可以通过css重置改变css原始样式

        /* 单元格间隙合并 */
        table{
            border-collapse: collapse;
        }
        /* 重置单元格间隙 */
        th,td{
            padding: 0;
        }

设置之后 的效果变为：

 可以看到表格的间隙不见了，并且内间距也不见了。

---

单元格的合并

合并需要的两个属性

• rowspan： 纵向合并
• colspan： 横向合并
• 操作要点：1找2合3删除

   行合并

实现行合并，找到要合并的单元格，加上colspan=“n”，n为要合并的单元格数，删除多余的单元格

     <table border="1">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td colspan="3">2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>

 列合并

方法与行合并相似

    <table border="1">
        <tr>
            <td>1</td>
            <td rowspan="6">2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>1</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>

 

注：table表格不常用。了解即可，行列合并时重点