html-速成(表单)

最新推荐文章于 2026-01-08 17:30:22 发布

原创最新推荐文章于 2026-01-08 17:30:22 发布 · 254 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

一，表格

组成：行、列、单元格

特点：同行等高、同列等宽

表格标签：表格<table>

行:<tr>

单元格(列)：<td>

<!doctype html>
<html>
    <title>

    </title>

     <body>
     <table >
          <tr >
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
          </tr>
          <tr >
            <td>单元格4</td>
            <td>单元格5</td>
            <td>单元格6</td>
          </tr>
          <tr >
            <td>单元格7</td>
            <td>单元格8</td>
            <td>单元格9</td>
          </tr>
     </table>
     </body>
</html>

以上代码可以做出一个的表格：

直接生成的表格没有边框需要在<table>添加border属性

Tborder：设置表格的边框

Width：设置表格的宽度

Height：设置表格的高度

<table border=”多少像素” Width=”数值“ hight="数值">

添加部分属性后表格会美观些

单元格的合并：

水平合并:colspan

垂直合并:rowspan

单元格的合并在<td>中使用

例如要水平合并单元格1，2时


     <table border="1" width="200" hight="200">
          <tr >
            <td colspan="2"> 单元格1 单元格2</td>
           
            <td>单元格3</td>
          </tr>
          <tr >
            <td>单元格4</td>
            <td>单元格5</td>
            <td>单元格6</td>
          </tr>
          <tr >
            <td>单元格7</td>
            <td>单元格8</td>
            <td>单元格9</td>
          </tr>
     </table>

执行以上代码后可得：

垂直也是同理：垂直合并单元格4，7

     <table border="1" width="200" hight="200">
          <tr >
            <td colspan="2"> 单元格1 单元格2</td>
           
            <td>单元格3</td>
          </tr>
          <tr >
            <td rowspan="2">单元格4 单元格7</td>
            <td>单元格5</td>
            <td>单元格6</td>
          </tr>
          <tr >
            <td>单元格8</td>
            <td>单元格9</td>
          </tr>
     </table>

就可以得到：