zoukankan      html  css  js  c++  java
  • HTML列表与表格

    border:控制边框

    宽度

    height:高度

    table是表格 tr:行 td:列★

    colspan:合并列★
    rowspan:合并行★

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>列表/表格</title>
    </head>
    
    <body>
    		<!--1.有序列表/想要不同的效果就用type=""-->
    	 <ol>
    		<li>夏侯惇</li>
    		<li>夏侯渊</li>
    		<li>夏侯恩</li>
    		<li>曹孟德</li>
    		<li>刘玄德</li>
    		<li>张翼德</li>
    	 </ol>
    		<!--2.无序列表/想要不同的效果就用type=""-->
    	 <ul>
    	 	<li>赵子龙</li>
    	 	<li>孙仲谋</li>
    	 	<li>鲁子敬</li>
    	 	<li>马孟起</li>
    	 	<li>关云长</li>
    	 	<li>周公瑾</li>
    	 </ul>
    		<!--3.定义列表/由定义条件和定义描述组成。-->
    	<dl>
    		<dt>语文</dt>
    		<dd>这是一门写作文的学科</dd>
    		<dt>数学</dt>
    		<dd>这是一门写公式的学科</dd>
    	</dl>
    <hr>
    		<!--表格标签-->
    		<!--两行三列-->
    		<!--border:控制边框 宽度 height:高度-->
    		<!--table是表格 tr:行 td:列-->
    		<!--在table表格中设置里宽高,里面的行和列不能超过table总体的宽高!!!-->
    		<!--td标签属性
    		    1.width="100":宽度
    		    2.height="100":高度
    		    colspan="2":合并列
    		    rowspan="2":合并行
    		-->
    		<table border="1px" width="300px" height="100px">
    			<tr height="50px">
    				<td colspan="2">数学</td>
    				<td>英语</td>
    			</tr>
    			<tr height="50px">
    				<td colspan="3"></td>
    			</tr>
    		</table>
    		<!--所谓两行,也是必须有列才能形成行列对称-->
    		<table border="1px" width="100px" height="100px">
    			<tr>
    				<td rowspan="2"></td>
    			</tr>
    			<tr>
    			</tr>
    			<tr>
    				<td></td>
    			</tr>
    		</table>
    <hr>
    <table border="1px" width="150px" height="150px">
    		<tr height="50px">
    			<td rowspan="2"></td>
    			<td colspan="2" rowspan="2"></td>	
    		</tr>
    		<tr  height="50px">		
    		</tr>
    		<tr  height="50px">
    			<td></td>
    			<td colspan="2"></td>
    		</tr>
    	</table>
    </body>
    </html>
    
  • 相关阅读:
    大型运输行业实战_day12_1_权限管理实现
    大型运输行业实战_day11_2_事务理论与实际生产配置事务管理
    大型运输行业实战_day11_1_aop理论与aop实际业务操作
    SpringBoot目录文件结构和官方推荐的目录规范、静态资源访问
    SpringBoot常用的注解
    Spring Boot面试题
    Spring常见面试题总结
    dubbo面试题及答案
    nginx面试题及答案
    Mybatis面试题及答案
  • 原文地址:https://www.cnblogs.com/awdsjk/p/10583698.html
Copyright © 2011-2022 走看看