search

Home  >  Article  >  Web Front-end  >  Example tutorials on tables and lists in html

Example tutorials on tables and lists in html

零下一度
零下一度Original
2017-06-24 11:58:411486browse

Today I have prepared forms and lists for you.

1. The article has various data tables This web page is no exception.

(1), label meaning

f5d188ed2c074f8b944552db028f98a1----------------------Table start
　　63bd76834ec05ac1f4c0ebbeaafb099437eb775bb5a9e6f3d094e96a76117fe8-------Table title
　　　a34de1251f0d9fe1e645927f19a896e8------------Row start tag
                                                                                                                                                                             --Cell
​ ​ ​ fd273fcf5bcad3dfdad3c41bd81ad3e5-------------------End of line tag
f16b1740fad44fb09bfe928bcc527e08-------- -------------Table end

(2), table style

　

cellpadding Attribute setting cell The distance between the border and the cell content.                                    
cellspacing The property sets the distance between cells.                                                                                                                                                               .
height Set the height of the table. [Note]: It is best to write the attribute "High" in
table and let it expand automatically. But this can give tr the required height for each row
Code 

<html>
     <head>
	<title>表格</title>
     </head>
     <body>
	<table border="1px" width="500px" cellpadding="10px" cellspacing="10px">
　　		<caption>表格标题</caption>
　　　　		<tr height="50px"> 
　　　　　　		<th>表头</th>
　　　　　　		<th>表头</th>
　　　　		</tr>
		<tr> 
　　　　　　		<td>单元格</td>
　　　　　　		<td>单元格</td>
　　　　		</tr>
	</table>
     </body>
</html>

Effect

2. Unordered list

ff6d136ddc5fdfeffaf53ff6ee95f185 Unordered list attributes: 25edfb22a4f469ecb59f1190150159c620c8e614631fcba321f41f9abbb245e3 　　 　　 Ordered list attribute: 　　25edfb22a4f469ecb59f1190150159c6bed06894275b65c1ab86501b08a632eb 　　　　　　　　　　　　　　　　　　　　　　　　　　　　 around down around through the list > f6f112ef45f603be226bc581f9dd5e90 　　　　 1(Arrange downwards according to the numbers 1.2.3...) A(Arrange downwards according to the uppercase letters A.B.C...) a(Arrange downwards according to the lowercase letters a.b.c.... Row down)

                                                                                                                                                                       It does not start from 1 by default but starts from 2)

Code


<html>
     <head>
	<title>有序列表</title>
     </head>
     <body>
	  <ol type="A">       
   		<li>有序列表</li>  
   		<li>有序列表</li>
   		<li>有序列表</li>   
 	  </ol>                     

     </body>
</html>



The effect is according to A, B, C.. . When arranging type down, you can only write those three types

##

The above is the detailed content of Example tutorials on tables and lists in html. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Share an algorithm question related to the front-endNext article：Share an algorithm question related to the front-end

Related articles

See more