当前位置:网站首页>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:00 【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]所创,转载请带上原文链接,感谢
边栏推荐
- Who says cat can't do link tracking? Stand up for me
- 事务的本质和死锁的原理
- A small goal in 2019 to become a blog expert of CSDN
- An article will take you to understand SVG gradient knowledge
- 【学习】接口测试用例编写和测试关注点
- Network security engineer Demo: the original * * is to get your computer administrator rights! [maintain]
- Analysis of serilog source code -- how to use it
- 游戏主题音乐对游戏的作用
- 理解格式化原理
- 【應用程式見解 Application Insights】Application Insights 使用 Application Maps 構建請求鏈路檢視
猜你喜欢
游戏主题音乐对游戏的作用
GitHub: the foundation of the front end
Tron smart wallet PHP development kit [zero TRX collection]
How to play sortable JS vuedraggable to realize nested drag function of forms
Top 5 Chinese cloud manufacturers in 2018: Alibaba cloud, Tencent cloud, AWS, telecom, Unicom
How to turn data into assets? Attracting data scientists
How does filecoin's economic model and future value support the price of fil currency breaking through thousands
检测证书过期脚本
华为云微认证考试简介
消息队列(MessageQueue)-分析
随机推荐
IPFs rudder filecoin landing at the same time, fil currency price broke a thousand
一部完整的游戏,需要制作哪些音乐?
Digital city responds to relevant national policies and vigorously develops the construction of digital twin platform
Top 5 Chinese cloud manufacturers in 2018: Alibaba cloud, Tencent cloud, AWS, telecom, Unicom
Small program introduction to proficient (2): understand the four important files of small program development
How to get started with new HTML5 (2)
C語言I部落格作業03
Basic usage of Vue codemirror: search function, code folding function, get editor value and verify in time
Axios learning notes (2): easy to understand the use of XHR and how to package simple Axios
html+vue.js 實現分頁可相容IE
StickEngine-架构12-通信协议
Introduction to Google software testing
2020年数据库技术大会助力技术提升
Git rebase is in trouble. What to do? Waiting line
What are PLC Analog input and digital input
快速排序为什么这么快?
Interpretation of Cocos creator source code: engine start and main loop
Shh! Is this really good for asynchronous events?
嘉宾专访|2020 PostgreSQL亚洲大会阿里云数据库专场:王涛
Introduction to X Window System