HTML表格

内容

表格格式
常用属性
快捷键生成表格
单元格合并
标题
列分组标签

表格格式

<table border="0" cellspacing="0" cellpadding="10">
    <tr><th>Header</th></tr>
    <tr><td>Data</td></tr>
</table>

table：表格标签
tr：行（一个tr表示一行）
td：列（一个td代表一列）
th：表头

【注】如果不按照格式，即内容没有写在td标签内，则视为基本文本，tr标签将失效。

常用属性

border：边框【只能修饰table标签】
cellspace：单元格间距【只能修饰table标签】
cellpadding：单元格内容与边框的边距【只能修饰table标签】
height：行高【只能在tr上设置】
width：列宽【只能在td上设置】

【注】同时设置了多个tr、td，但只取值最高的，所以只设置一个就可以。
bgcolor：设置背景颜色，对于table、tr、td，都可以使用。
bordercolor：边框颜色【只能在table标签上设置】
background：背景图片【只能在table标签上设置】
【注】同时使用了bgcolor，那么bgcolor会失效。
valign：top\middle\bottom，设置内容上中下显示【在tr和td中使用】
align：left\center\right，设置内容左中右显示【table、tr和td中都使用】

快捷创建

table[border="1px" cellspace="0"]>tr[height=40px]*3>td[width="40"]{$}*4

按Tab键直接创建，属性用[ ]，数量用*n，内容用{ }，$占位符，会自动补上序号，从0开始。如果加的是&&，那么序号从01开始。

块选操作：Alt + 鼠标拖动

单元格合并

colspan=“n"：列合并，要将多余的删除掉，【td】中使用

rowspan=”n"：行合并，要将多余的删除掉，【td】中使用

<table  border="3" bordercolor="" cellspacing="0" cellpadding="50">
<caption>标题</caption>
<tr>
    <td rowspan="2" bgcolor="aqua"></td>
    <td colspan="2" bgcolor="hotpink"></td>
</tr>
<tr>
    <td bgcolor="red"></td>
    <td rowspan="2" ></td>
</tr>
<tr>
    <td colspan="2" bgcolor="orange"></td>
</tr>
</table>

QQ截图20200528210327.png

标题

caption

<table border="1" cellspacing="0" cellpadding="50">
    <caption>标题</caption>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>

表格补充

表格结构

thead：页眉
tbody：主体
tfood：页脚
th与td的区别是th自带加粗居中的效果

【注】一般不用页眉，主体，页脚标签

列分组标签

colgroup

<colgroup>
    <col span="n" style=“background-color：red">
</colgroup>

【注】n 代表要同时操作的多少列，<col >是单标签