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>
    
  • 相关阅读:
    [ARC101C] Ribbons on Tree
    NOIP2020 模拟赛 B 组 Day6
    #10471. 「2020-10-02 提高模拟赛」灌溉 (water)
    #10470. 「2020-10-02 提高模拟赛」流水线 (line)
    一类巧妙利用利用失配树的序列DP
    学军中学csp-noip2020模拟5
    信号与槽-高级应用
    PyQt5中的布局管理-QSplitter
    PyQt5中的布局管理-嵌套布局
    信号与槽-入门应用
  • 原文地址:https://www.cnblogs.com/awdsjk/p/10583698.html
Copyright © 2011-2022 走看看