Rumah  >  Artikel  >  hujung hadapan web  >  html中表格与列表的实例教程

html中表格与列表的实例教程

零下一度
零下一度asal
2017-06-24 11:58:411442semak imbas

 今天准备为大家准备了表格和列表。

一、文章有各种数据的表格这个网页也不例外。

(1)、标签意思 

f5d188ed2c074f8b944552db028f98a1----------------------表格开始
      63bd76834ec05ac1f4c0ebbeaafb099437eb775bb5a9e6f3d094e96a76117fe8-------表格标题
          a34de1251f0d9fe1e645927f19a896e8--------------------行开始标签 
              b4d429308760b6c2d20d6300079ed38e01c3ce868d2b3d9bce8da5c1b7e41e5b-------------表头 
              2e852944b30bc18a48842a9c5108cba8834c5a289f603c5c8e434a5f965ce36a-------------单元格 
          fd273fcf5bcad3dfdad3c41bd81ad3e5-------------------行结束标签 
 f16b1740fad44fb09bfe928bcc527e08---------------------表格结束

(2)、表格样式

  cellpadding 属性设置单元格边框和单元格内容的距离。
                                             cellspacing 属性设置单元格之间的距离。
                                             border 属性表示边框  
      width 设置表格的宽。
      height 设置表格的高。 [注]:高这个属性最好不小给 table 中写,让它自动撑开就好。但这个可以给 tr 给每行需要的高度

代码

 

<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>

效果

 

二、无序列表

ff6d136ddc5fdfeffaf53ff6ee95f185 无序列表属性:
  25edfb22a4f469ecb59f1190150159c6bed06894275b65c1ab86501b08a632eb      (type属性)   b1e743c65a3ca8ac375bead1a193fc46(是无序列表前边小黑点的属性)
929d1f5ca49e04fdcb27f9465b944689                  disc(实心圆)   circle(空心圆)  square(方块)

代码

<html>
     <head>
	<title>表格</title>
     </head>
     <body>
	 <ul type="circle">       
 		<li>无序列表</li>    
 	 </ul>           

     </body>
</html>

效果 

 

三、有序列表

有序列表:
c34106e0b4e09414b63b2ea253ff83d6              有序列表属性:
    25edfb22a4f469ecb59f1190150159c6bed06894275b65c1ab86501b08a632eb     (type属性) 801f8ed2710ee91677326fa365511243
f6f112ef45f603be226bc581f9dd5e90                   1(按数字1.2.3...往下排)    A(按大写字母A.B.C...往下排)  a(按小写字母a。b。c....往下排)
                            Ⅰ(按大写罗马数字Ⅰ、Ⅱ、Ⅲ.....往下排)
                          (start属性)28abb66bcb421e006bbcff39bd383232(表示这个有序列表不是默认的从1开始是从2开始的)

代码

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

     </body>
</html>

效果 按照A,B,C... 往下排 type 只能写那三种

 

Atas ialah kandungan terperinci html中表格与列表的实例教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:分享一个跟前端相关算法题Artikel seterusnya:详解CSS中的盒子模型