当前位置：网站首页>Style of table form

Style of table form

2022-07-22 06:22:00 【Dummerd】

Catalog

One . form

Two . Long form

One . form

Forms are used a lot in daily life , such as excel Is a tool specially used to create tables ,

Tables are used to represent some formatted data , such as ： The curriculum 、 Bank statement

You can also create different tables in web pages .

1、 stay HTML in , Use table Tag to create a table

2、 stay table Use in Tags tr To represent a row in a table , There's a couple of lines tr

3、 stay tr Required in td To create a cell , There are just a few cells td

4、table The tag has its own attributes ： border="1" width="40%" align="center"

5、rowspan Used to set vertical merge cells

6、colspan Merge cells horizontally

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title> form </title>
  </head>
  <body>
     <table border="1" width='50%' align="center">
       <tr>
         <td> full name </td>
         <td> weight </td>
         <td> height </td>
         <td rowspan="4"> The horses are always close </td>
       </tr>
       <tr>
         <td> Zhang San </td>
         <td>100kg</td>
         <td>180cm</td>
       </tr>
       <tr>
        <td> Li Si </td>
        <td>50kg</td>
        <td>190cm</td>
      </tr>
      <tr>
        <td colspan="3"> Put it as Ken .</td>
      </tr>
     </table>
  </body>
</html>

The table style

Two . Long form

In some cases the form is very long

In this case, you need to divide the table into three parts , Header , The body of the form , At the bottom of the table

stay HTML There are three tags for us

thead Header Always at the head of the form

tbody The body of the form Always in the middle of the form

tfoot The bottom of the table Always at the bottom of the table

Used to distinguish different parts of the table , The order , The browser will automatically adjust

If the form doesn't say tbody, The browser will automatically add tbody

And put all tr in tbody in , So pay attention to tr Not at all table Child elements , It is tbody Child elements

adopt table > tr Cannot select line Need to pass through tbody > tr

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th> date </th>
          <th> income </th>
          <th> spending </th>
          <th> total </th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
        <tr>
          <td>10.24</td>
          <td>500</td>
          <td>300</td>
          <td>200</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td></td>
          <td></td>
          <td> total </td>
          <td>100</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Out of the long table style

原网站

版权声明
本文为[Dummerd]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/203/202207211426211023.html

当前位置：网站首页>Style of table form

Style of table form

边栏推荐

猜你喜欢

随机推荐