h5标签基础 table表格标签

时间:2023-03-09 04:27:08
h5标签基础  table表格标签

一、表格的定义:用于有规范的显示数据。

  

二、基本组成:

     行<tr>/列<td>/表头<caption>/表标题<th>

  

    eg:

      <table>

          <caption><h1>学生信息表</h1></caption> <!---表头--->

          <tr> <!----行-->

            <th>姓名</th>

            <th>年龄</th>  <!----标题-->

          </tr>

          <tr> <!----行-->

            <td>张大勇</td>  <!----列-->

            
            <td>22岁</td>  <!----列-->

          </tr>

      </table>

三、table包含的属性

    宽:width  高:hight 背景色:bgcorlor

    单元格与单元格之间的距离:cellspacing=数值,默认是2可设置

指单元格里的内容占据的地方 cellpadding=数值   可设置

    边框线:border=数值

      eg:

        细线表格的制作

            h5标签基础  table表格标签

        分析:table标签有背景色(bgcolor)属性,tr也有,而细线可以通过单元格与单元格之间的距离设置后,给用户体现为细线,从而不使用border这个属性

        代码:

  <table cellspacing="3" bgcolor="green" width="500" height="200">

<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr><tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr><tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr><tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

</table>

四、横向合并、纵向合并单元格

  横向:colspan="数值"

   纵向合并:rowspan="数值"

  eg:制作一个课程表

    h5标签基础  table表格标签

  代码:

      

      <table bgcolor="green" cellspacing="2" width="600" height="300" >
          <caption><h1>课程表</h1></caption> <!---表头-------->

          <tr bgcolor="white"><!----行-->

    <th colspan="2"></th>
    <th>星期一</th>
    <th>星期二</th>
    <th>星期三</th>
    <th>星期四</th>
    <th>星期五</th>

 </tr>
 <tr bgcolor="white"><!----行-->
    <td >上午</td>
    <td>1</td>
    <td>数学</td>
    <td>语文</td>
    <td>英语</td>
    <td>物理</td>
    <td>历史</td>
 </tr>
 <tr bgcolor="white"><!----行-->
    <td >下午</td>
    <td>2</td>
    <td>数学</td>
    <td>语文</td>
    <td>英语</td>
    <td>物理</td>
    <td>历史</td>
</tr>

</table>