2019-04-01

今晚学习表格元素
一、表格构成的三个基本要素
table:表格的范围，外框；用来定义表格，表格的其他元素都包含在talbel标签里。
tr：表格的行；td：表格的单元格（可理解为表格的列）；th：内容设置为标题效果
参考代码[talle][/table];[tr][/tr];[td][/td]

二、th元素：在表格内添加标题行
th是tr的子元素，必须放在tr标签里，th元素的内容会自动居中、对齐及加粗
可以这么理解，tr就是td的居中、对齐、加粗效果【见以下代码及图1】
代码 border="5",可以理解成表格外框厚度为5。

<table border="5">
    <tr><th>法师推荐</th><th>战士推荐</th><th>坦克推荐</th></tr>
    <tr><td>潮汐海灵</td><td>放逐之刃</td><td>海兽祭司</td></tr>
    <tr><td>万花通灵</td><td>无双剑姬</td><td>雷霆咆哮</td></tr>
    <tr><td>大发明家</td><td>战争之影</td><td>龙血武姬</td></tr>
</table>

图1.png

三、合并单元格的两个属性,值都为正整数 可以写在td后面
colspan元素：横向合并单元格 代码为[td] [colspan]="数值" [/td]
【见以下代码及图2】

   <table border="5">
        <th colspan="3">强势英雄推荐</th>
        <tr><th>法师推荐</th><th>战士推荐</th><th>坦克推荐</th></tr>
        <tr><td>潮汐海灵</td><td>放逐之刃</td><td>海兽祭司</td></tr>
        <tr><td>万花通灵</td><td>无双剑姬</td><td>雷霆咆哮</td></tr>
        <tr><td>大发明家</td><td>战争之影</td><td>龙血武姬</td></tr>
    </table>

图2.png

rowspan元素：纵向合并单元格 代码为[td] [rowspan]="数值" [/td]
距目前所学情况，如展示列数的n,则合并总列数为n+1；
有不对处，请大神指正。【见以下代码及图3】

    <table border="5">
            <th rowspan="5">强势英<br>雄推荐</th>
            <tr><th>法师推荐</th><th>战士推荐</th><th>坦克推荐</th></tr>
            <tr><td>潮汐海灵</td><td>放逐之刃</td><td>海兽祭司</td></tr>
            <tr><td>万花通灵</td><td>无双剑姬</td><td>雷霆咆哮</td></tr>
            <tr><td>大发明家</td><td>战争之影</td><td>龙血武姬</td></tr>
    </table>

图3.png

以后会尽量把每天的代码和所见效果贴出来，大家一起学习！