HTML table_Powernode Java Academy
|
To draw a table in HTML, use the table tag
Here is an example.
<html>
<head>
<title>Table in html</title>
</head>
<body>
<p>Horizontal header</p>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>zdd</td>
<td>30</td>
<td>male</td>
</tr>
</table>
<p>Vertical header</p>
<table border="1">
<tr>
<th>Name</th>
<td>autumn</td>
</tr>
<tr>
<th>Age</th>
<td>30</td>
</tr>
<tr>
<th>Gender</th>
<td>famale</td>
</tr>
</table>
</body>
</html>Rendering Horizontal header
Vertical Header
Borderless table If you do not specify the border attribute when defining a table, the table will have no borders.
<table>
<tr><td>zdd</td><td>30</td></tr>
<tr><td>ddz</td><td>27</td></tr>
</table>Rendering
Empty cells If no content is specified for a cell, the cell will be empty and have no border, as shown below, which is not very beautiful.
What if it is solved? The method is to add spaces to empty cells. Since HTML ignores extra spaces, we cannot add spaces directly, but need to add nbsp to represent spaces.
<table border="1">
<tr><td>zdd</td><td>30</td></tr>
<tr><td> </td>20</tr>
</table>Rendering
Table with title Use the caption attribute, but it seems that there cannot be spaces in the title, otherwise it will wrap when displayed!
<table border="1">
<caption>My form</caption>
<tr><td>zdd</td><td>30</td></tr>
<tr><td> </td><td>20</td></tr>
</table>My Form
Tables that span rows or columns Use colspan to span lines <table border="1"> <tr><th>Name</th><th colspan="2">Phone</th></tr> Bill Gates 555 77 854 555 77 855 </table>
Using rowspan to span columns <table border="1"> <tr><th>Name</th><td>Bill Gates</td></tr> <tr><th rowspan="2">Telephone</th><td>555 77 854</td></tr> <tr><td>555 77 855</td></tr> </table> Nested tables The table tag can be nested, which means that you can create a table within a table by adding a table tag to a tr or td tag. | ||||||||||||||||||||||||||||||||||
<<: Basic ideas for finding errors in Web front-end development
>>: Problems encountered when updating the auto-increment primary key id in Mysql
Recommend
Detailed explanation of the order of Mysql query results according to the order of ID in in()
Detailed explanation of the order of Mysql query ...
MySql cache query principle and cache monitoring and index monitoring introduction
Query Cache 1. Query Cache Operation Principle Be...
Vue Element UI custom description list component
This article example shares the specific code of ...
A brief discussion on the lazy loading attribute pattern in JavaScript
Table of contents 1. Introduction 2. On-demand at...
CSS to implement QQ browser functions
Code Knowledge Points 1. Combine fullpage.js to a...
IE8 compatibility notes I encountered
1. IE8's getElementById only supports id, not ...
HTML set as homepage and add to favorites_Powernode Java Academy
How to implement the "Set as homepage" ...
JS realizes the scrolling effect of announcement online
This article shares the specific code of JS to ac...
Detailed explanation of TypeScript's basic types
Table of contents Boolean Type Number Types Strin...
Vue implements click feedback instructions for water ripple effect
Table of contents Water wave effect Let's see...
VUE realizes registration and login effects
This article example shares the specific code of ...
Detailed explanation of Nginx's rewrite module
The rewrite module is the ngx_http_rewrite_module...
MySQL transaction isolation level details
serializable serialization (no problem) Transacti...
Linux common commands chmod to modify file permissions 777 and 754
The following command is often used: chmod 777 文件...
Problems encountered when updating the auto-increment primary key id in Mysql
Table of contents Why update the auto-increment i...