HTML表格和表单

HTML表格和表单

表格由 table 标签来定义。每个表格均有若干行（由 tr>标签定义），每行被分割为若干单元格（由 td 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML表格

表格由 table 标签来定义。每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

表格的运用

英雄名称	英雄大招	英雄价格
披甲龙龟	地动山摇	￥3150
诺克萨斯统领	变成乌鸦	￥6300
雪人双子	绝对零度	￥450

 <table border="1">
        <thead>
            <tr>
                <th>英雄名称</th>
                <th>英雄大招</th>
                <th>英雄价格</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>披甲龙龟</td>
                <td>地动山摇</td>
                <td>￥3150</td>
            </tr>
            <tr>
                <td>诺克萨斯统领</td>
                <td>变成乌鸦</td>
                <td>￥6300</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>雪人双子</td>
                <td>绝对零度</td>
                <td>￥450</td>
            </tr>
        </tfoot>
    </table>

合并单元格

1	2	3	4	5	6
7	8	9	10	11	12

1	2	跨列合并
7	8	9	10	11	12

1	2	3	跨行合并
10	11	12

跨列合并			跨行合并
跨列合并

<table border="1">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
        </tr>
    </table>
    <br>
    <table border="1">
        <tr>
            <td>1</td>
            <td>2</td>
            <td colspan="4">跨列合并</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
        </tr>
        </table>
        <br>
        <table border="1">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td rowspan="2">跨行合并</td>

            </tr>
            <tr>
                <td>10</td>
                <td>11</td>
                <td>12</td>
            </tr>
        </table>
    <br/>
    <table border="1">
        <tr>
            <td colspan="3">跨列合并</td>

            <td rowspan="2">跨行合并</td>

        </tr>
        <tr>

            <td colspan="3">跨列合并</td>

        </tr>
    </table>

HTML表单

表单

用户名：

 <label for="username" >用户名：</label>
  <input type="text" id="username" >

文本域控件

淡粉色考虑过进去了如何反馈区二环苦情花非示范区番茄味

	 <textarea cols="10" rows="10">
     		淡粉色考虑过进去了如何反馈区二环苦情花非示范区番茄味
     </textarea>