亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

HTML與CSS之實體字符和畫表格

標簽:
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>

显示效果:


webp

数表.png

给td添加边框:

td{    border: 1px solid red;
}

显示效果:


webp

带边框的数表.png

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

table{    border-collapse: collapse;
}

显示效果:


webp

完整数表.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>

显示效果:


webp

横向融合表格.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>

显示效果:


webp

纵向融合表格.png

             




作者:JustinPenChia
链接:https://www.jianshu.com/p/21f06ad880f6


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消