HTML&CSS(09)-html(2) 表格和表单

 
  • 0 views

Unit One: HTML&CSS(09)-html(2)

1. 表格<table>

  • tr表示一行。
  • td表示单元格。
    • 默认垂直居中
    • 可用vertical-align和text-align设置文字对齐位置
  • colspan：num：横向合并
  • rowspan:num: 纵向合并
<body>
    <table border="2" width='100%' align="center">
        <tr>
            <td rowspan="2">A1</td>
            <td>A2</td>
            <td colspan="2">A3</td>
            <!-- <td>A4</td> -->
        </tr>
        <tr>
            <!-- <td>B1</td> -->
            <td>B2</td>
            <td>B3</td>
            <td>B4</td>
        </tr>
</body>

2. 长表格

  • <thead>表头
  • <tbody>表身
    • 如果表格中没有使用<tbody>创建表身，而直接使用<tr>，浏览器会自动添加一个<tbody>标签。
    • tr不是<table>的子元素。
  • <tfoot>表尾
  • <th>表头部单元格
  • 标签固定后，顺序可任意调换。

3. 表格样式

  • 边框间距：border-spacing;
  • 边框合并：border-collapse:collapse;

4. 练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table {
        width: 300px;
        height: 100px;
        border: 3px solid tomato;
        margin: 100px auto;
        /* border-spacing: 1px; */
        border-collapse: collapse;
    }

    td {
        border: 1px solid black;
        /* 默认情况下，文字垂直居中。 */
        height: 100px;
        /* 可以通过vertical-align、text-align设置对齐位置。 */
        vertical-align: top;
        text-align: center;
    }

    tr:nth-child(2n) {
        background-color: aqua;
    }

    tr:nth-child(1) {
        background-color: blue;
    }
</style>

<body>
    <table>
        <tr>
            <td rowspan="2">Abcd1</td>
            <td>A2</td>
            <td colspan="2">A3</td>
            <!-- <td>A4</td> -->
        </tr>
        <tr>
            <!-- <td>B1</td> -->
            <td>B2</td>
            <td>B3</td>
            <td>B4</td>
        </tr>
        <tr>
            <td rowspan="2">C1</td>
            <td>C2</td>
            <td colspan="2">C3</td>
            <!-- <td>A4</td> -->
        </tr>
        <tr>
            <!-- <td>B1</td> -->
            <td>D2</td>
            <td>D3</td>
            <td>D4</td>
        </tr>
</body>

</html>

5. 表单

在现实生活中，表单用于提交数据。

网页中使用表单，用于将本地的数据提交给远程的服务器。

  • <form action="">

    • 元素
      • 表单要提交的服务器地址<action="">
      • 数据提交服务器中，必须要为元素指定一个:name属性值。
      • 表单项(行内块元素)
        • 文本框<input type="text" name="">
        • 普通按钮<input type="button" name="">
        • 重置按钮：<input type="reset" name="">
        • 提交按钮<input type="submit" value="" name="">
        • 密码框<input type="password" name="">
        • 单选按钮<input type="radio" name="" value="" checked>
          • :name属性值相同，则为一组单选框，只能选一个。
          • checked默认值
        • 多选框<input type="checkbox" name="" value="" checked>
        • 下拉列表 <select name="">+<option value="" checked>
        • 颜色选择<input type="color" name="" value="">
        • 邮件框<input type="email" name="" value="">
        • 电话框<input type="tel" name="" value="">
    • 属性
      • 自动补全<autocomplete="off/on...">
      • 将表单项设为只读<readonly>
        • 只读属性会提交。
      • 将表单项设为禁用<disabled>
        • 禁用属性不会提交。
      • 自动获取焦点<autofocus>
        • 网页刷新后，会自动获取光标。