当前位置:网站首页>An article will introduce you to HTML tables and their main attributes

An article will introduce you to HTML tables and their main attributes

2020-11-06 20:48:32 Python advanced

One 、 Define a HTML form

Use labels to define HTML form .

Each row in the tag definition table uses . Use labels to define headers . By default , Table titles are bold and centered . A table of data / Unit uses Tag definition .

<table style="width:100%">
 <tr>
   <th>Firstname</th>
   <th>Lastname</th>
   <th>Age</th>
 </tr>
 <tr>
   <td>Jill</td>
   <td>Smith</td>
   <td>50</td>
 </tr>
 <tr>
   <td>Eve</td>
   <td>Jackson</td>
   <td>94</td>
 </tr>
</table>

Be careful : The element is the data container of the table . They can contain all of HTML Elements ; Text 、 Images 、 list 、 Other forms, etc .


1. HTML form - Add border

If you don't specify a table border , The border will not be displayed .

Use CSS Set the table border as follows :

<style>
table, th, td {
   border: 1px solid black;
}
</style>

Remember to define borders for tables and table cells .


2. HTML form - Fold the border

If you want the border to fold into a border , add to CSS border-collaps Border properties :

<style>
 table, th, td {
     border: 1px solid black;
     border-collapse: collapse;  /* Fold the border */
}
</style>


3. HTML form - Add cells to fill (padding)

Cell fill (padding) Specifies the space between the cell content and its border .

If no padding is specified (padding), Table cells are displayed without filling in (padding).

Set the fill , Use css padding attribute :

<style>

 table, th, td {
     border: 1px solid black;
     border-collapse: collapse;
}
 th, td {
     padding: 15px; /*  Set margins */
}
</style>


4. HTML form - Left aligned title

By default , Table titles are bold and centered .

Left aligned table title , Use CSS text-align attribute :

th {
   text-align: left;
}


5. HTML form - Add border spacing

Border spacing specifies the space between cells .

Set the boundaries of a table space , Use CSS border-spacing attribute :

table {
   border-spacing: 15px; /* Add border spacing */
}

Be careful : If the watch is already collapsed Fold the border , Border spacing doesn't affect .


6. HTML form Cells span multiple columns

Make table cells span multiple columns , Use colspan attribute :

<table style="width:100%">
 <tr>
   <th> full name </th>
   <th colspan="2"> Telephone </th>
 </tr>
 <tr>
   <td>Bill Gates</td>
   <td>55577854</td>
   <td>55577855</td>
 </tr>
</table>


7. HTML In the table - Cells span multiple rows

Make table cells span multiple rows , Use rowspan attribute :

<table style="width:100%">
 <tr>
   <th> full name :</th>
   <td> bill </td>
 </tr>
 <tr>
   <th rowspan="2"> Telephone :</th>
   <td>55577854</td>
 </tr>
 <tr>
   <td>55577855</td>
 </tr>
</table>


8. HTML form - Add the title

To add a title to a table , Please use ` label :

<table style="width:100%">
 <caption> Save every month </caption> <!-- title -->
 <tr>
   <th> month </th>
   <th> savings </th>
 </tr>
 <tr>
   <td>January</td>
   <td>$100</td>
 </tr>
 <tr>
   <td>February</td>
   <td>$50</td>
 </tr>
</table>

Be careful :` The label must be inserted immediately in `` After tag .


Two 、 project

Specify a special style for the table

Specify a special style for the table , Add one id attribute :

<table id="t01">
 <tr>
   <th>Firstname</th>
   <th>Lastname</th>
   <th>Age</th>
 </tr>
 <tr>
   <td>Eve</td>
   <td>Jackson</td>
   <td>94</td>
 </tr>
</table>

Now you can define a special style for this table :

table#t01 {
   width: 100%;

   background-color: #f1f1c1;
   border: 2px solid black;
 
}

Add more styles :

table#t01 tr:nth-child(even) {
   background-color: #eee;
}
table#t01 tr:nth-child(odd) {
   background-color: #fff;
}
table#t01 th {
   color: white;
   background-color: black;
}


A small summary

label describe
<table> Define the form
<th> Define the header cell in the table
<tr> Define a row in a table
<td> Define the cells in the table
<caption> Define a table title
<colgroup> Specifies the format of one or more columns in a table .
<col> Specify the properties of each column in the column with . <colgroup>  Elements
<thead> Use the header content in the table to group
<tbody> Group body content into a table

attribute describe
border Property defines a border
border-collapse Define properties for collapsing cell borders
padding Padding added to cells
text-align Align cell text
border-spacing Set the spacing between cells
colspan Make cells span multiple columns
rowspan Make cells span multiple rows
id It only represents a table

3、 ... and 、 summary

This paper mainly introduces HTML form , The main attributes in the table are introduced in detail . Answer the questions in detail . It is convenient for you to understand the label of the form . I hope it will help you in your study .

Want to learn more Python Web crawler and data mining knowledge , Go to a professional website :http://pdcfighting.com/

版权声明
本文为[Python advanced]所创,转载请带上原文链接,感谢

随机推荐