梁贺寄-20201027

课堂笔记：

1 表格table
1.1 表格
    <table border="1" cellspacing="0" cellpadding="20">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
            </tr>
            <tr>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
            </tr>
            <tr>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
            </tr>
    </table>
注：border="1px"   边框设置
    cellpadding="20"  单元格内间距
    cellspacing="0"   单元格之间的间距

1.2表格的基本组成（三部分：表头，thead；正文，tbody；表尾，tfoot）
    <table border="1" cellspacing="0" cellpadding="20">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年级</th>
                    <th>学号</th>
                    <th>性别</th>
                    <th>备注</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>a</td>
                    <td>b</td>
                    <td>c</td>
                    <td>d</td>
                    <td>e</td>
                    <td>f</td>
                </tr>
            </tfoot>
    </table>
    table内包含三部分：<thead></thead>表示表头，其中<tr></tr>标签代表行，<th></th>表示列（具有加黑加粗效果）；<tbody></tbody>代表正文部分用<td>表示单元格；<tfoot></tfoot>表示表尾。

1.3 合并单元格
    <table border="1" cellspacing="0" cellpadding="20">
            <tr>
                <td>1</td>
                <td colspan="3">2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td rowspan="3">2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
            </tr>
            <tr>
                <td>4</td>
                <td colspan="4">5</td>
            </tr>
            <tr>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>5</td>
                <td colspan="2">6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
            </tr>
    </table>

心得体会：表单对前端开发来说还是挺高的，因为我们能在一个网页中看到很多的表单应用。包括用户的注册啦，密码验证啦，还有搜索栏之类的，几乎全是表单的应用。