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

作者: JustinPenChia | 来源:发表于2016-10-29 12:36 被阅读145次

    一.实体字符

    在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

    相关文章

      网友评论

        本文标题:HTML与CSS之实体字符和画表格

        本文链接:https://www.haomeiwen.com/subject/xlqyuttx.html