欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-12 21:28:34
...

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

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

(1)、标签意思 

<table>----------------------表格开始
  <caption></caption>-------表格标题
    <tr>--------------------行开始标签
      <th></th>-------------表头
      <tb></tb>-------------单元格
    </tr>-------------------行结束标签
</table>---------------------表格结束

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

效果

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

二、无序列表

<ul> 无序列表属性:
  <li></li>    (type属性) <ul type="dise">(是无序列表前边小黑点的属性)
</ul>         disc(实心圆) circle(空心圆) square(方块)

代码

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

     </body>
</html>

效果 

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

三、有序列表

有序列表:
<ol>        有序列表属性:
  <li></li> (type属性) <ol type="1">
</ol>        1(按数字1.2.3...往下排) A(按大写字母A.B.C...往下排) a(按小写字母a。b。c....往下排)
          Ⅰ(按大写罗马数字Ⅰ、Ⅱ、Ⅲ.....往下排)
          (start属性)<ol start="2">(表示这个有序列表不是默认的从1开始是从2开始的)

代码

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

     </body>
</html>

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

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

以上就是html中表格与列表的实例教程的详细内容,更多请关注其它相关文章!