前端table表格的⽤法
⽂章⽬录
⼀、table的基础⽤法
代码如下：
<table>
html表格内外边框颜
<tr>//第⼀⾏
<td>第⼀⾏第1列</td>
<td>第⼀⾏第2列</td>
</tr>
<tr>//第⼆⾏
<td>第⼆⾏第1列</td>
<td>第⼆⾏第2列</td>
</tr>
</table>
html效果：
第⼀⾏第1列第⼀⾏第2列
第⼆⾏第1列第⼆⾏第2列⼆、table属性
border="表格的边框值"
bordercolor="边框的颜⾊"
width="宽度"
height="⾼度"
cellspacing="单元格与单元格之间的距离"
cellpadding="单元格与内容之间的距离"
⽔平对齐 align="left/center/right"
(左对齐/居中/右对齐)
垂直对齐 valign="top/middle/bottom"
(上对齐/居中/下对齐)
三、合并单元格
合并单元格属性
合并⾏：rowspan="所要合并的单元格的⾏数"
合并列：colspan="所要合并的单元格的列数"
注：跨⾏合并的都是合并⾏，不跨⾏合并的都是合并列；
要点：（合并⾏-从上往下推，合并列从左往右推，最后注释掉多余的部分）
代码如下：
<h4>合并列</h4>
<table border="1"width="500"height="100"cellspacing="0"> <tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<!--<td></td>-->
</tr>
</table>
<h4>合并⾏</h4>
<table border="1"width="500"height="100"cellspacing="0"> <tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<!--<td></td>-->
</tr>
</table>
</body>
html效果：
合并列
合并⾏
此处部分效果并未完全显⽰ 编辑器⾥⾯代码最终效果如下
拓展
拓展2：
总结
以上是对table表格的⼩总结，后期将继续更新html基础知识点⽂章为原创内容，要是遇到有不合适的地⽅欢迎赐教

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。