梁贺寄-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>

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

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1