当前位置:网站首页>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]所创,转载请带上原文链接,感谢
边栏推荐
- Have you ever thought about why the transaction and refund have to be split into different tables
- Have you ever thought about why the transaction and refund have to be split into different tables
- 第27课:使用时间测量工具挖掘可利用的业余时间(图文篇)
- Python: how to use time library
- Uni app learning record -- 1. Uni app basic grammar
- TS-34 components and types (2): high order components and hooks
- C language I blog assignment 05
- C language I blog assignment 05
- C + + cout format output complete strategy
- [reprint] SAP FICO common report list
猜你喜欢
-
Notes on swagger2
-
Alertmanager 报警模板
-
Solution of NTP server (digital clock system) in smart campus
-
The most complete SQL window function Guide - data analysis interview must know
-
The essential skills of programmers: Clickhouse
-
The essential skills of programmers: Clickhouse
-
Principle of code generator
-
If you delete the database, what should you do?
-
Class file structure
-
Class file structure
随机推荐
- Class file structure
- New semantic tags
- Daily work knowledge
- Nacos microservice registration discovery, configuration and management of microservices
- Case analysis of software engineering CSDN
- 10: summary of JVM tuning
- Detailed explanation of event object in browser
- Fundamentals of decision tree (2)
- XML DOM node types
- The expansion of flash -- flash Sqlalchemy
- Zheng Zheng | 2021 software code development technology assignment 5 | code development, testing and release
- [azure API management] after APIM integrates the intranet virtual network, it enables the user-defined route management, and the outgoing traffic passes through the firewall, but the APIs cannot be loaded
- Flink real time data warehouse -- data preparation of DWD layer
- Artdialog configuration parameters
- Face to face Manual Chapter 1 "recognizing your own technology stack blind area"
- Annual salary 30W Test Engineer growth path, what stage are you in?
- Schedule for entry and printing of admission tickets for the next soft test in 2021 (Nationwide)
- Jar package, driver class name and URL format corresponding to various databases
- Annual salary 30W Test Engineer growth path, what stage are you in?
- C + + programming zero foundation introductory class "one-to-one"
- Type correspondence between C and C + +
- Work parting and blessing
- Weight control chart of cocky dog
- JVM startup parameters
- Personal software process PSP
- Overview of applet components
- Manual of facial scriptures · Chapter 1 "recognize your own technology stack blind area"