HTML与CSS之实体字符和画表格

一.实体字符

在html中,有一些字符不适合直接写出来,如<,>
一般格式:&+实体名;
大于号> &gt  小于号< &lt  &符号 &amp  
双引号"" &quot  人民币符号 &yen

二.表格

 <table> 标签定义 HTML 表格
 <th> 表头
 <tr> 表格行
 <td> 表格列
            <table>
                <th>one</th>
                <th>two</th>
                <th>three</th>
                <th>four</th>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>14</td>
                    <td>15</td>
                    <td>16</td>
                </tr>
            </table>

显示效果:


数表.png

给td标签添加边框:

td{
    border: 1px solid red;
}

显示效果:


带边框的数表.png

然而这并不是我们想要的!
让相邻的边框融合:

table{
    border-collapse: collapse;
}

显示效果:


完整数表.png

其他情况:

1.colspan 横向融合

值为数字,表示横向融合几格

            <table>
                <tr>
                    <th>one</th>
                    <th>two</th>
                    <th>three</th>
                </tr>
                <tr>
                    <td colspan="3">1</td>
                    
                </tr>
                <tr>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
            </table>

显示效果:


横向融合表格.png

2.rowspan 纵向融合

值为数字,表示纵向融合几格

              <table>
                <tr>
                    <th>one</th>
                    <td rowspan="2">1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <th>two</th>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <th>three</th>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                </tr>
            </table>

显示效果:


纵向融合表格.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容