编程知识 cdmana.com

The way of front end programming

stay HTML in , We use <table> Tag to define the table .HTML The table in and Excel The table in is similar to , All include the line 、 Column 、 Cell 、 Head and other elements . however HTML Tables are far from functional Excel The tables are powerful ,HTML Table does not support sorting 、 Sum up 、 Variance and other mathematical calculations , It's usually used to show data .

Before learning the form , Let's start with a simple paragraph HTML Code :

1.  <table border="1">
2.  <tr>
3.  <th> name </th>
4.  <th> Official website </th>
5.  <th> nature </th>
6.  </tr>
7.  <tr>
8.  <td>C Chinese language network </td>
9.  <td>http://c.biancheng.net/</td>
10.  <td> education </td>
11.  </tr>
12.  <tr>
13.  <td> Baidu </td>
14.  <td>http://www.baidu.com/</td>
15.  <td> Search for </td>
16.  </tr>
17.  <tr>
18.  <td> Dangdang </td>
19.  <td>http://www.dangdang.com/</td>
20.  <td> The book </td>
21.  </tr>
22.  </table>

The operation effect is shown below :

 Ordinary table form

This is a 4 That's ok 3 List of tables . The first line is the header , The other three actions are .

In the above code , We used <table>、<tr>、<td> And <th> Four labels :

  • Represents a table , All the contents of the form need to be written in
    and
    Between .
  • <tr> yes table row For short , Row representing table . How many in the table <tr> The tag shows how many lines of data there are .
  • <td> yes table datacell For short , Represents the cell of a table , This is the label that actually holds the table data . Cell data can be text 、 picture 、 list 、 The paragraph 、 Forms 、 Level 、 Forms and so on .
  • <th> yes table heading For short , Represents the table header .<th> It's actually <td> A variant of the cell , It's essentially a cell .<th> It's usually on the first line , Act as the title of each column . Most browsers display the header as bold centered text .
  • By default , Tables have no borders . But we can use <table> In the tag border Property to set the width of the table's border , Unit is pixel (px). In this example, we set the border width of the table to 1px. Be careful ,px Is the default unit , There is no need to specify explicitly .

    1. Table borders merge :

    Careful readers may have found out , Most of the common table styles in web pages are single-layer borders , The table shown in the above example has a double border . To avoid that , We can use CSS Medium border-collapse Property to set the border of the table .border-collapse yes “ The border collapses ” It means , When the attribute value is collapse when , You can change the double border of a table into a single border .

    The sample code is as follows :

    1.  <table border="1" style="border-collapse: collapse;">
    2.  <tr>
    3.  <th> name </th>
    4.  <th> Official website </th>
    5.  <th> nature </th>
    6.  </tr>
    7.  <tr>
    8.  <td>C Chinese language network </td>
    9.  <td>http://c.biancheng.net/</td>
    10.  <td> education </td>
    11.  </tr>
    12.  <tr>
    13.  <td> Baidu </td>
    14.  <td>http://www.baidu.com/</td>
    15.  <td> Search for </td>
    16.  </tr>
    17.  <tr>
    18.  <td> Dangdang </td>
    19.  <td>http://www.dangdang.com/</td>
    20.  <td> The book </td>
    21.  </tr>
    22.  </table>

    The operation effect is shown in the figure below :

     Table borders merge

    2. Table title

    HTML Allow to use <caption> Tag to set the title for the table , The title is used to describe the content of the table .

    Our common forms usually have titles , The title of the table uses <caption> Label . By default , The title of the table is on the first row of the table and is centered . A table can only have one title , in other words <table> There can only be one... In the label <caption> label .

    Please see the following example :

    1.  <table border="1" style="border-collapse: collapse;">
    2.  <caption> This is the title of the table </caption>
    3.  <tr>
    4.  <th> name </th>
    5.  <th> Official website </th>
    6.  <th> nature </th>
    7.  </tr>
    8.  <tr>
    9.  <td>C Chinese language network </td>
    10.  <td>http://c.biancheng.net/</td>
    11.  <td> education </td>
    12.  </tr>
    13.  <tr>
    14.  <td></td>
    15.  <td>http://www.baidu.com/</td>
    16.  <td> Search for </td>
    17.  </tr>
    18.  <tr>
    19.  <td> Dangdang </td>
    20.  <td>http://www.dangdang.com/</td>
    21.  <td> The book </td>
    22.  </tr>
    23.  </table>

    The browser running results are shown in the figure :

     A table with a title

    3. Cell merging

    and Excel similar ,HTML Cell merging is also supported , It includes cross row merge and cross column merge .

    • rowspan: Cross line merge . stay HTML In the code , Allow us to use rowspan Property to indicate the number of rows the cell will span .
    • colspan: Represents a cross column merge . alike , stay HTML in , Allow us to use colspan Property to indicate the number of columns the cell will span .

    The specific format is as follows :

    <td rowspan="n"> Cell contents </td>
    <td colspan="n"> Cell contents </td>

    n It's an integer , Represents the number of rows or columns to merge .

    Note here , Whether it's rowspan still colspan All are <td> Attributes of the tag .

    In the following example , We will put the form No 1 In the column 3、4 Row cell merge ( Cross bank merger ), Will be the first 4 OK, No 2、3 columns ( Cross column merge ). The specific code is as follows :

    1.  <table border="1" style="border-collapse: collapse;">
    2.  <tr>
    3.  <th> name </th>
    4.  <th> Official website </th>
    5.  <th> nature </th>
    6.  </tr>
    7.  <tr>
    8.  <td>C Chinese language network </td>
    9.  <td>http://c.biancheng.net/</td>
    10.  <td> education </td>
    11.  </tr>
    12.  <tr>
    13.  <td rowspan="2"> Baidu </td>
    14.  <td>http://www.baidu.com/</td>
    15.  <td> Search for </td>
    16.  </tr>
    17.  <tr>
    18.  <td colspan="2">http://www.dangdang.com/</td>
    19.  </tr>
    20.  </table>
    

    The operation effect is as shown in the figure :

     A table that merges cells

    Running results show that :

    • rowspan Property to merge cells down ,colspan Property to merge cells to the right .
    • Every merger n Write less in each cell n-1 individual <td> label .

    Tips : Even if there is nothing in a cell , We still need to use <td> or <th> Element to represent the existence of an empty cell , It is suggested that <td> or <th> Add  ( Space ), Otherwise, the lower version of IE You may not be able to display the border of this cell .

版权声明
本文为[Front end plus]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224164500936i.html

Scroll to Top