前端笔记3(表格)

2019/4/3

1.表格

表格行与列

<table border="1" width="500" height="200" cellspacing="0" cellpadding="30" align="center" bgcolor="purple">
    <tr align="center">
        <td>sada</td>
        <td>dgdyy</td>
    </tr>
    <tr>
        <td>dd</td>
        <td>ddd</td>
    </tr>
</table>

border=“1” 边框
cellspacing=“20” 单元格与单元格的距离
cellpadding=“30” 内容距边框的距离
align=“left\center\right” 表格位置
bgcolor 表格背景颜色

表格的标准结构

<table border="1" width="200" height="100">
    <thead><!--头部-->
    <tr height="300"><!--height只能加到这里，加在thead无反应-->
        <td>wode</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>bb</td>
    </tbody>
    <tfoot><!--尾部-->
    <tr>
        <td>tt</td>
    </tr>
    </tfoot>
</table>

表头和单元格合并

表头

SODA 21		画家
KUDE	22	漫画家
SUDI	19

<table border="1" width="400" height="200" cellspacing="0">
    <caption>表头</caption>
    <tr>
        <td colspan="2">SODA 21</td>
        <!--<td>21</td>-->
        <td>画家</td>
    </tr>
    <tr>
        <td>KUDE</td>
        <td>22</td>
        <td rowspan="2">漫画家</td>
    </tr>
    <tr>
        <td>SUDI</td>
        <td>19</td>
        <!--<td>作家</td>-->
    </tr>
</table>

<caption></caption>表头
colspan=“2” 合并同一行的单元格
rowspan=“2” 合并同一列的单元格

表格标题，内容对齐方式，边框颜色

SUDA	19	漫画家

<table border="1" bordercolor="pink" cellspacing="0" width="100" height="50">
    <tr>
        <th>SUDA</td>
        <td valign="bottom">19</td>
        <td>漫画家</td>
    </tr>
 </table>
 

<th></th>表格标题
bordercolor=“pink” 表格边框颜色
valign="top\middle\bottom"对齐方式

细线表格

<table cellspacing="1" width="300" height="200" bgcolor="purple">
    <tr bgcolor="white">
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
    </tr>
</table>

课程表细线表格

课程表

		星期一	星期二	星期三	星期四	星期五
上午	1	音乐	漫画	体育	游戏	美食
	2	音乐	漫画	体育	游戏	美食
下午	1	音乐	漫画	体育	游戏	美食
	2	音乐	漫画	体育	游戏	美食

<table bgcolor="purple" width="300" height="200" cellspacing="1">
    <caption>课程表</caption>
    <tr bgcolor="white">
        <th colspan="2"></th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr bgcolor="white">
        <td rowspan="2">上午</td>
        <td>1</td>
        <td>音乐</td>
        <td>漫画</td>
        <td>体育</td>
        <td>游戏</td>
        <td>美食</td>
    </tr>
    <tr bgcolor="white">
        <td>2</td>
        <td>音乐</td>
        <td>漫画</td>
        <td>体育</td>
        <td>游戏</td>
        <td>美食</td>
    </tr>
    <tr bgcolor="white">
        <td rowspan="2">下午</td>
        <td>1</td>
        <td>音乐</td>
        <td>漫画</td>
        <td>体育</td>
        <td>游戏</td>
        <td>美食</td>
    </tr>
    <tr bgcolor="white">
        <td>2</td>
        <td>音乐</td>
        <td>漫画</td>
        <td>体育</td>
        <td>游戏</td>
        <td>美食</td>
    </tr>
</table>