HTML5表格怎么设置样式 html5怎么制作表格

转载

mob64ca14157da7 2024-04-09 12:45:08

文章标签 HTML5表格怎么设置样式 ci 背景色宽高 文章分类 HTML5 移动开发

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

　　首先，表格命令

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

居中、加粗）

表格标题：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表格怎么设置样式 html5怎么制作表格_HTML5表格怎么设置样式