html5常用标签table表格布局

html5常用标签table表格布局

一、总结

一句话总结：

二、html5常用标签table表格布局

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

1、首先，表格命令

　　表格的行：tr  每行中的列：td

　　表格的表头：<th></th>  默认加粗，单元格居中（居中、加粗）

　　表格标题：caption

　　跨列：colspan，当某个格跨n列时，其右边n-1个单元格需删除

跨行：rowspan，当某个格跨n行时，其下方n-1个单元格需删除（看每一行有几个上边线，有几条画几个）

   

 

2、<table>标签的常用属性

1、border：给表格添加边框，当border属性增大时，只有外围框线增加，单元格的边框始终为1px（一个像素）

2、cellspacing：单元格与单元格之间的间隙距离。当cellspacing="0"，只会使单元格间隙为0，但不会合并边框线。【表格边框合并】，无需再写cellspacing="0"。

3、cellpadding：每个单元格中的内容，与边框线的距离。

4、weight/height：表格的宽高

5、align：表格在屏幕的左中右位置显示，left、center、right（给表格加上align，相当于让表格浮动，会直接打破表格后面元素的原有排列方式）

6、bgcolor：背景色    等同于

7、background：background="img/aaa.png"背景图片     等同于，且背景图会覆盖背景色

8、bordercolor="blue"边框颜色

以上都可以用样式表代替

 

 

3、近者优先原则

　　当表格属性与行列属性冲突时，以行列属性为准；

表格的align属性，是控制表格自身在浏览器的显示位置；行和列的align属性，是控制单元格中文字在单元格的对齐方式

表格的align属性，并不影响表格内，文字的水平对齐方式；tr和align属性，可以控制一行中所有单元格的水平对齐方式。

caption：表格标题

4、【tr和td相关的属性】

1、weight、height单元格的宽高

2、bgcolor：单元格的背景颜色

3、align：left center right 单元格中的文字，水平对齐方式

4、valign：top middle bottom单元格中的文字，垂直对齐方式

5、nowrap：nowrap="nowrap"单元格中文字不换行

 

 

5、练习

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

　　　　代码：<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 >1</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td >2</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td >3</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td >4</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
   <tr>
    <td >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>

 

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

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

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

　　3.还有表格数字的居中设置，这个在td里设置，可以用样式设置。

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

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