• 首页课程HTML趣味课堂HTML 表格的创建

    HTML 表格的创建

    目录列表

    创建表格

    表格由 <table> 标签来定义。

    每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。

    下面是一个包含两行两列的表格:

    <table border="1">
       <tr>
           <td></td>
           <td></td>
       </tr>
       <tr>
           <td></td>
           <td></td>
       </tr>
    </table>


    什么标签定义 HTML 表格中的标准单元格?

    表格 border 属性

    border 属性规定表格单元周围是否显示边框。

    如果不定义边框属性,表格将不显示边框。

    下面是一个带有边框的表格:


    <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>

    在浏览器显示结果如下:


    下载 (5).png

    使用什么属性来显示一个带有边框的表格:

    表格表头

    表格的表头使用 <th> 标签进行定义。

    大多数浏览器会把表头显示为粗体居中的文本。

    下面是一个例子:

    <table border="1">
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
      <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>

    在浏览器显示结果如下:


    下载 (6).png

    在空格处填写正确的标签:

    <table border="1">

     <tr>

        <>Header 1</th>

        <th>Header 2</th>

      </tr>

      <>

        <td>row 1, cell 1</>

        <td>row 1, cell 2</td>

      </tr>

    </table>

    表格 colspan 和 rowspan 属性

    使用 colspan 和 rowspan 属性分别定义跨列和跨行的表格单元格。

    下面是一个单元格跨两行的表格:

    <table border="1">
      <tr>
        <td>First Name:</td>
        <td>Bill Gates</td>
      </tr>
      <tr>
        <td rowspan="2">Telephone:</td>
        <td>555 77 666</td>
      </tr>
      <tr>
        <td>555 77 667</td>
      </tr>
    </table>


    使用什么属性定义跨列的表格单元格?

    PHP中文网