表格

Posted 不可哈希

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了表格相关的知识,希望对你有一定的参考价值。

1       创建表格

① table、tr和td标记。表格的3部分:行、列和单元格,一般通过3个标记来创建。table创建表格,tr标记创建行,td创建单元格。

② 标题标记caption

③ 表头标记th

<table>

      <caption>表格的标题</caption>

      <tr>

            <th>表头中的内容</th>

            <th>表头中的内容</th>

            …

      </tr>

      <tr>

            <td>单元格中的内容</td>

            <td>单元格中的内容</td>

            …

      </tr>

2       设置表格的宽度、高度以及对齐方式

<table width=”表格宽度” height=”表格高度” align=”对齐方式”>

若不指定表格宽度或高度,浏览器会根据表格内容自动调整宽度。align的取值可以为left(默认)、center、right。

3       设置表格的边框

① 表格边框宽度

② 表格边框颜色

③ 单元格的间距

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

<table border=”边框宽度值” bordercolor=”颜色值” cellspacing=”间距值” cellpadding=”内容与边框的间距值”>

4       设置表格的背景

① 设置表格的背景色

<table bgcolor=”颜色值”>

② 设置表格的背景图像

<table background=”背景图片背景”>

5       设置表格的行属性

① 行的高度

② 行文字的水平对齐方式

③ 行的边框颜色

④行的背景颜色

<tr height=”行高值” align=”对齐方式” bordercolor=”颜色值” bgcolor=”颜色值”>

6       设置表格的单元格属性

① 单元格的宽度和高度

② 单元格的水平跨度(跨多列)

③ 单元格的垂直跨度(跨多行)

④ 单元格的对齐方式。与行对齐方式的设置方法一样,可参考tr标记的align和valign属性来设置单元格的对齐方式。

⑤ 单元格的背景色、边框颜色。可参考tr标记的bgcolor和bordercolor属性来设置单元格的背景色、边框颜色。

<td width=”单元格的宽度值” height=”单元格的高度值” colspan=”跨的列数值” rowspan=”跨的行数值”>

7       表格的嵌套

任何一对<td>和</td>标记里面都可以嵌套一个表格,也就是说表格一定要嵌套在单元格里。

<table>

      <tr>

            <td>单元格中的内容</td>

            <td>单元格中的内容</td>

            …

      </tr>

      <tr>

            <td>

                  <table>…</table>

            </td>

            <td>单元格中的内容</td>

            …

      </tr>

      …

</table>

8       表格的结构

html语言中有thead、tbody和tfoot三个标记分别表示一个表格的表头、表主体和表尾。

<table>

      <thead bgcolor=”背景颜色” align=”对齐方式”>

            <tr>

                  <td></td>

                  <td></td>

                  …

            </tr>

      </thead>

      <tbody bgcolor=”背景颜色” align=”对齐方式”>

            <tr>

                  <td></td>

                  <td></td>

                  …

            </tr>

      </tbody>

      <tfoot bgcolor=”背景颜色” align=”对齐方式”>

            <tr>

                  <td></td>

                  <td></td>

                  …

            </tr>

      </tfoot>

</table>

以上是关于表格的主要内容,如果未能解决你的问题,请参考以下文章

在 BigQuery Cloud Shell 中从 Google 表格创建外部表格时,如何选择默认表格(第一张表格)以外的表格?

表格和表格中没有表格

如何设置Word中表格的宽度

怎么照片里的表格提取成电子表格

word表格快捷技巧 word表格快捷窍门

Layui表格及弹出层显示表格