html5-表格的建立

时间:2023-05-04 09:54:26

  用表格显示信息调理清楚,使浏览者一目了然。表格在网页中还有协助布局的作用,可以把文字、图像等组织到表格的不同行列。那么,接下来我将讲解一下表格的常用属性。

  首先,表格命令

  表格的行:tr  每行中的列:td
  表格的表头:<th></th>  默认加粗,单元格居中(居中、加粗)
  表格标题:caption
  跨列:colspan,当某个格跨n列时,其右边n-1个单元格需删除
跨行:rowspan,当某个格跨n行时,其下方n-1个单元格需删除(看每一行有几个上边线,有几条画几个)

<table>标签的常用属性

1、border:给表格添加边框,当border属性增大时,只有外围框线增加,单元格的边框始终为1px(一个像素)
2、cellspacing:单元格与单元格之间的间隙距离。当cellspacing="0",只会使单元格间隙为0,但不会合并边框线。【表格边框合并】style="border-collapse: collapse;",无需再写cellspacing="0"。
3、cellpadding:每个单元格中的内容,与边框线的距离。
4、weight/height:表格的宽高
5、align:表格在屏幕的左中右位置显示,left、center、right(给表格加上align,相当于让表格浮动,会直接打破表格后面元素的原有排列方式)
6、bgcolor:背景色    等同于style="background-color:;"
7、background:background="img/aaa.png"背景图片     等同于style="background-image:;",且背景图会覆盖背景色
8、bordercolor="blue"边框颜色
以上都可以用样式表代替

近者优先原则

  当表格属性与行列属性冲突时,以行列属性为准;
表格的align属性,是控制表格自身在浏览器的显示位置;行和列的align属性,是控制单元格中文字在单元格的对齐方式
表格的align属性,并不影响表格内,文字的水平对齐方式;tr和align属性,可以控制一行中所有单元格的水平对齐方式。
caption:表格标题

【tr和td相关的属性】

1、weight、height单元格的宽高
2、bgcolor:单元格的背景颜色
3、align:left center right 单元格中的文字,水平对齐方式
4、valign:top middle bottom单元格中的文字,垂直对齐方式
5、nowrap:nowrap="nowrap"单元格中文字不换行

练习

    接下来,我们制作一个简单的表格。

    代码:<table border="2" cellspacing="0" >
   <tr>
    <th>序号</th>
    <th>日期</th>
    <th>姓名</th>
    <th>时间</th>
    <th>身份证号</th>
    <th>单位</th>
    <th>来访事由</th>
    <th>记录人</th>
    <th>备注</th>
   </tr>
   <tr>
    
    <td style="text-align: center;">1</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td style="text-align: center;">2</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td style="text-align: center;">3</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td style="text-align: center;">4</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td style="text-align: center;">5</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td colspan="9" align="middle">经被访人核实,外来人员登记后方可入内。</td>
   </tr>
  </table>

html5-表格的建立

上图制作中, 说几个比较容易出错的地方(其实是楼主打错的地方qwq)。

  1.行列弄混,表头出现在了第一列,呈现纵向排列。

  2.空格子显示不出来,这可能是没有打<td></td>。

  3.还有表格数字的居中设置,这个在td里设置,可以用样式style="text-align: center;"设置。

  4.最后就是表格的跨行与跨列,也就是colspan和rowspan,这个需要特别注意,不要错用,可以通过简单记col和row来实现。

  最后呢,这是本博主写的第一篇博客,写的比较丑陋,板式啊什么的都没有。当然了,随着博主的学习,这些在以后博客更新中会有所改善。大家需要转载的话,请注明本篇文章的链接。