怎樣用html寫表格

今天上了第二節興唐杯網頁設計的課,今天學的東西不難但一時教這麼多東西還是很難以消化的。今天教了怎樣在網頁上寫表格,用到了border,1px是邊框寬度,biack是邊框顏色,這些都可以在<style>    </style>中調。以 <th>序號</th><th>姓名</th><th>電話</th><th>住址</th>這種形式可以輸入一行表格內容。  

如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
			<style>
				table{
				border:1px/*寬度*/ solid/*線的形式(實線)*/ black/*顏色*/;
				border-spacing: 10px;/*線的間隔*/
				border-collapse: collapse;/*表格的兩邊框合爲一條*/
			}
			
			td,th{
				border:1px  solid black;/*規定橫線和豎線的寬度;線的形式:實線;線的顏色*/
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>序號</th><th>姓名</th><th>電話</th><th>住址</th>
			</tr>
			<tr>
				<th>序號</th><th>姓名</th><th>電話</th><th>住址</th>
			</tr>
			<tr>
				<th>序號</th><th>姓名</th><th>電話</th><th>住址</th>
			</tr>
			
		</table>
	</body>
</html>

輸出後如下圖:

行內元素不單獨成行,如<b>   </b>(加粗字體);<i>    </i>使字體傾斜

如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<b>鄭州</b><!--加粗-->
		<i>鄭州</i><!--斜體-->
		<del>鄭州</del><!--中間劃橫線-->
		<span>鄭州</span><!--無作用-->
	</body>
</html>

運行後

 

塊級元素單獨成行,有<hn> </hn>(調字體大小),<p></p>,<div></div>

如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--
        	作者:[email protected]
        	時間:2020-11-18
        	描述:塊級元素;高級包裹內容,但是寬度等同於父標記;單獨成行
        -->
		<!--hn n n=1~6調節字體大小-->
		<h1>zhengzhou</h1>
		<h6>zhengzhou</h6>
		<p>河南工業大學</p>
		<div>杭州</div>
	</body>
</html>

運行後

 

有序列表<ol start="2" type="1">(調左邊序號和形狀)</ol>,<li>語文</li>類型添加列表物。類似的,
<ul type="circle"></ul>表示無序列表  ,<li>語文</li>類型添加列表物

如: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--
        	作者:[email protected]
        	時間:2020-11-18
        	描述:ordered list 縮寫 ol 有序列表
        -->
        <ol start="2" type="1">
        	<li>語文</li>
        	<li>數學</li>
        	<li>英語</li>
        </ol>
		<!--
        	作者:[email protected]
        	時間:2020-11-18
        	描述:unorder list u1 無序列表
        -->
        <ul type="circle">
        	<li>語文</li>
        	<li>數學</li>
        	<li>英語</li>
        </ul>
	</body>
</html>

運行後 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章