今晚学习表格元素
一、表格构成的三个基本要素
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>
三、合并单元格的两个属性,值都为正整数 可以写在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>
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>
以后会尽量把每天的代码和所见效果贴出来,大家一起学习!