您现在的位置：首页 >> 前端 >> 内容

HTML基础学习-5-table表格学习1

时间：2017/6/15 9:23:00 点击：

　　核心提示：HTML基础学习-5-table表格学习1html!--caption tr 每一行可以嵌套td其他行或者 th表头默认加粗第一行table属性widthheightborder边框 align ...

<html>

<!--

<caption 

<tr   每一行   可以嵌套  <td其他行  或者 <th表头 默认加粗第一行


<table  属性  width  height  border  边框 align 对齐方式  cellspacing 单元格之间的距离默认2px

cellpadding 单元格内容和边框之间的距离

frame 属性  void 无边框   above  below hsides  lhs rhs vsides box

rules 单元格之间是否有分割线  
        none  
        all  r
        ows仅有行分割线  

        clos仅有列分割线  
        groups   表示仅在行和列组之间有分割线 

align  标题位于表格  top  left  bottom right 哪里


<tr 属性  bgcolor  背景颜色  align 垂直对齐方式  valign 水平对齐方式  


<th   bgcolor 单元格背景  align  对齐方式   valign  width  height  
        rowspan 设置单元格所占行数  colspan 设置单元格所占列数
-->

<head>
<title>表格练习1</title>
<meta charset="utf-8">
</head>

<body>
    <table width= "960px" height ="360px" border="2px" 

    align="center"
    cellspacing= "3px"
    cellpadding="10px">
        <caption>表格的标题</caption>
        <tr bgcolor ="blue" align ="center">
           <th bgcolor="green" rowspan="2" colspan="2">班级</th>
           <th>姓名</th>
           <th>年龄</th>
           <th>成绩</th>

        </tr>

        <tr bgcolor="red" align="center">

            <td>四年级一班</td>
            <td>张三</td>
            <td>16</td>
            <td>80</td>
        </tr>
        <tr>

            <td>四年级一班</td>
            <td>李四</td>
            <td>14</td>
            <td>不及格</td>
        </tr>
    </table>

</body>


</html>