HTML列表标签与表格标签

列表标签

ul:无序列表
    
  • 列表项<\li> 属性:type disc:默认的 circle:空心圆点 sqare:小正方形(实心的) eg:
    • 列表项<\li> <\ul> ol:有序列表
    • 列表项<\li> 属性:type 1:1,2,3,...... a:a,b,c,...... A:A,B,C,......
  • 列表标签的使用

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>列表标签title>
    	head>
    	<body>
    		
    		喜欢的水果:
    		
    		<ul type="square">
    			
    			<li>苹果li>
    			<li>桃子li>
    			<li>香蕉li>
    			<li>火龙果li>
    			<li>桔子li>
    		ul>
    		<hr />
    		
    		您喜欢的音乐类型?
    		<ol type="1" >
    			<li>流行li>
    			<li>民谣li>
    			<li>摇滚li>
    		ol>
    		
    	body>
    html>
    

    效果展示:
    HTML列表标签与表格标签_第1张图片

    表格标签

    table:表格标签
        属性:
            border:边框线大小
            width:表格的宽度
            height:表格的高度
            align:对齐方式
            bgcolor:背景色
            
        tr:行标签
        td:单元格标签
        
        单元格的合并:
            colspan:合并列
            rowspan:合并行
       
       
    	   thead:表头
    	   tbody:正文
    	   tfoot:脚注
       thead、tfoot 以及 tbody 元素解决用户有效性体验,使有能力对表格中的行进行分组。
       当创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。
       这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。
       当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。
    

    表格标签的使用

    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>表格标签title>
    	head>
    	<body>
    		
    		<table border="2"
    				width="200"
    				height="50"
    				bgcolor="aquamarine">
    			表1:
    			<th>表头1th>
    			<th>表头2th>
    			<th>表头3th>
    			<tr align="middle">
    				<td>(1,1)td>
    				<td>(1,2)td>
    				<td>(1,3)td>
    			tr>
    			<tr align="middle">
    				<td>(2,1)td>
    				<td>(2,2)td>
    				<td>(2,3)td>
    			tr>
    		table>
    		<br />
    		
    		<table border="2" bgcolor="antiquewhite">
    			表2(单元格的合并):
    			
    			<th>表头1th>
    			<th>表头2th>
    			<th>表头3th>
                <tr align="left">
    				<td colspan="2">(1,1)td>
    				<td rowspan="2">(1,3)td>
    			tr>
    			<tr align="left">
    				<td>(2,1)td>
    				<td>(2,2)td>
    			tr>
    		table>
    		<br />
    		
    		<table border="3" bgcolor="cadetblue">
    		表3:thead,thead,tfoot
    		
    		  <thead>
    		    <tr>
    		      <th>Monthth>
    		      <th>Savingsth>
    		    tr>
    		  thead>
    		 
    		  <tfoot>
    		    <tr>
    		      <td>Sumtd>
    		      <td>$180td>
    		    tr>
    		  tfoot>
    		 
    		  <tbody>
    		    <tr>
    		      <td>Januarytd>
    		      <td>$100td>
    		    tr>
    		    <tr>
    		      <td>Februarytd>
    		      <td>$80td>
    		    tr>
    		  tbody>
    		table>
    
    	body>
    html>
    

    结果展示:
    HTML列表标签与表格标签_第2张图片

    表格的嵌套

    
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>表格的嵌套title>
    	head>
    	<body>
    		<table border="1" 
    			width="300px" 
    			height="100px"
    			alidn="center"
    			bgcolor="antiquewhite">
    			<caption>成绩单caption>
    			<th>班级th>
    			<th>成绩th>
    			<th>平均分th>
    			<tr>
    				<td>计161td>
    				<td>
    					<table border="1" 
    							width="100%" 
    							height="100%"
    							alidn="center"
    							bgcolor="beige">
    						<tr>
    							<td>11td>
    							<td>12td>
    							<td>13td>
    						tr>
    						<tr>
    							<td>21td>
    							<td>22td>
    							<td>23td>
    						tr>
    					table>
    				td>
    				<td>15td>
    			tr>
    			
    			<tr>
    				<td>计162td>
    				<td>
    					<table border="1" 
    							width="100%" 
    							height="100%"
    							alidn="center"
    							bgcolor="azure">
    						<tr>
    							<td>14td>
    							<td>15td>
    							<td>16td>
    						tr>
    						<tr>
    							<td>24td>
    							<td>25td>
    							<td>26td>
    						tr>
    					table>
    				td>
    				<td>21td>
    			tr>
    		table>
    	body>
    html>
    

    结果展示:
    HTML列表标签与表格标签_第3张图片

    你可能感兴趣的:(Web前端,HTML,标签,基础,前端)