星之码-前端开发-网页表格Table标签与表单标签

670 05-11

网页表格Table标签

一、表格基本格式

格式：

<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
    </tr>
</table>

说明：

<table>…</table> 用来声明表格开始与结束

<tr>…</tr> 用来设置表格的行

<th>…</th> 用来设置表格标题栏位,默认字体加粗

<td>…</td> 用来设置表格的列

二、表格完整格式

格式：

<table>
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>主体1</td>
            <td>主体2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>页脚1</td>
            <td>页脚2</td>
        </tr>
    </tfoot>
</table>

说明：

<caption>…</caption> 定义表格标题，每个表格只能定义一个标题，通常居中显示于表格之上

<thead>…</thead> 定义表格的表头

<tbody>…</tbody> 定义表格主体(正文)

<tfoot>…</tfoot> 定义表格页脚(脚注或表注)
注意：表格的标签必须成对使用

三、<table>标签属性

border：设置表格边框的宽度 (取整数值，单位像素)
bordercolor：设置表格边框的颜色 (取英文或十六进制颜色)
bordercolorlight：设置表格亮边框颜色 (取英文或十六进制颜色)
bordercolordark：设置表格暗边框颜色 (取英文或十六进制颜色)
bgcolor：设置表格的背景颜色 (取英文或十六进制颜色)
background：设置表格的背景图片 (URL)
width：设置表格的宽度 (像素或百分比)
height：设置表格的高度 (像素或百分比)
cellspacing：设置单元格之间的间距 (像素或百分比)
cellpadding：设置表格单元格边框与单元内容之间的间距 (像素或百分比)
align：设置对齐方式，取值left(左对齐)、center(居中对齐)、right(右对齐)，建议不使用
summary：定义表格内容摘要 (字符串)

四、<table>标签内部分割线与外部分割线的属性

（1）外部分隔线frame属性

void：不显示表格边框，默认项
above：只显示表格上边框
below：只显示表格下边框
hsides：只显示表格上下边框
vsides：只显示表格左右边框
lhs：只显示表格左边框
rhs：只显示表格右边框
box/border：显示表格四个边上的边框

（2）内部分隔线rules属性

rows：只显示横向分隔线
cols：只显示纵向分隔线
none：不显示任何边框
all：显示所有边框
groups：显示行组与列组之间的线条,即在<thead><tbody><tfoot>之间显示横线

五、单元格<tr><th><td>标签属性

（1）<th>和<td>都是插入单元格的标签，这两个标签必须嵌套在<tr>标签内,成对出现。
（2）<th>用于表头标签，表头标签一般位于首行或首列，标签之间的内容就是位于该单元格内的标题内容,以粗体居中显示。
（3）<tr><th><td>以下属性必须在border不等于0的情况下生效。

width：设置表格的宽度 (像素或百分比)
height：设置表格的高度 (像素或百分比)
bgcolor：设置表格的背景颜色 (取英文或十六进制颜色)
background：设置表格的背景图片 (URL)
align：设置水平方向对齐，取值left(左对齐)、center(居中对齐)、right(右对齐)
valign：设置垂直方向对齐，取值top(顶端)、middle(居中)、bottom(底部)、baseline(基线)

（4）<th>和<tr>标签合并属性

colspan：横向向右合并单元格的列
rowspan：纵向向下合并单元格的行

六、<colgroup>标签

（1）定义与用法

<colgroup>标签用于对表格中的列进行组合，以便对其进行格式化。
如需对全部列应用样式，<colgroup> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。

<colgroup> 标签只能在 table 元素中使用。
（2）属性

align：设置水平方向对齐，取值left(左对齐)、center(居中对齐)、right(右对齐)
valign：设置垂直方向对齐，取值top(顶端)、middle(居中)、bottom(底部)、baseline(基线)
width：设置表格的宽度 (像素或百分比)
span：设置列组应该横跨的列数，就是控制那几列生效。

经过测试：align和valign基本不生效

（3）colgroup和col区别
colgroup和col标签必须出现在表格当中，定义表格单独列的任意属性，col必须在colgroup中使用。col能覆盖colgroup定义的属性

（4）示例

<table border="1">
    <colgroup span="3" style="background-color:red" width="30px;">
        <col style="background-color:#FFF">
        <col width="50px">
        <col span="1" width="100px">
    </colgroup>
    <tr>
        <th>table</th>
        <th>colgroup</th>
        <th>col</th>
    </tr>
    <tr>
        <td>html</td>
        <td>table</td>
        <td>css</td>
    </tr>
    <tr>
        <td>html2</td>
        <td>table2</td>
        <td>css2</td>
    </tr>
</table>

注解：
colgroup 中的 span=”3” 是控制style给表格中的前3列(如果后面无col则有效)，背景色为红色，宽度为30。
以上例子如果内部没有col，结果为表格所有列的背景色为红色，宽度为30。
第一个col定义表格第一列，col的白色背景色覆盖了colgroup中的红色，结果第一列背景色为白色。
第二个col定义表格第二列，结果第二列宽度为50。
第三个col中span=”1”,表示从第三列开始的1列长度为100，如果span=”2”,则表示第三列开始的2列。

七、表格的嵌套

一个大表格可以嵌套一个或者多个小的表格，由于CSS+DIV的出现，目前table常用于后台管理系统中。
示例：

<table border="1" width="500">
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>外围表格</td>
        <td>
            <table width="100%" border="0">
                <tr>
                    <td>嵌套表格</td>
                    <td>嵌套表格</td>
                </tr>
                <tr>
                    <td>嵌套表格</td>
                    <td>嵌套表格</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>外围表格</td>
        <td>外围表格</td>
    </tr>
</table>

以上基本上就是table表格常用的属性了，示例效果请复制粘贴运行即可。

认识表单标签

1、表单概述

（1）、表单功能
表单是浏览器客户端与服务器端交互的重要手段，在网页中负责数据采集功能。

（2）、表单由三部分组成
表单标签：用于描述表单处理程序的URL地址，数据提交的方式等表单的相关信息
表单域：包括文本框、密码框、隐藏域、多行文本框、文件上传框、下拉选择框、单选框、多选框
表单按钮：包括提交按钮、重置按钮、一般按钮。

2、表单标签<form>

（1）、表单语法：

<form action="URL" method="get/post" enctype="MIME" target="打开方式">
…
</form>

（2）、表单属性

id：表单名称
name：表单名称
action：用来定义表单处理程序(ASP、JSP、PHP等),使用相对地址或绝对地址
method：定义表单数据从浏览器传送到服务器的方式，一般有两种：get和post
enctype：用于指定表单提交数据时所采用的编码方式，默认值：application/x-www-form-urlencoded
target：指定提交的结果文档显示的位置，很少使用。取值：_blank、_parent、_self、_top

3、表单form的enctype属性各取值

text/plain：以纯文本的形式传送
application/x-www-form-urlencoded：默认的编码形式，即url编码形式
multipart/form-data：MIME编码，上传文件的表单必须选择该项

————————————————

智一面|前端面试必备练习题

标签： HTML