菜鸟教程-HTML小白之实例练习-0804

Lily_25

已于 2022-08-04 15:58:00 修改

阅读量142

点赞数

分类专栏：前端文章标签： html

于 2022-08-04 15:29:44 首次发布

本文链接：https://blog.csdn.net/Lily_25/article/details/126159007

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

实例1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
	
<body>

<h4>创建电子邮件</h4>
<p>创建电子邮件链接:
<a  href="mailto:someone@example.com?Subject=Hello%20again" target="_top">发送邮件</a>	
</p>
	
<p>创建更加复杂的电子邮件链接:
<a href="mailto:someone@example.com?cc=john@example.com&bcc=someoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top" rel="noopener noreferer">
发送邮件</a>
</p>
<hr /> 

<h4 style="text-align:left">带有标题的表格</h4>
<!-- border属性决定表格边框，border="0"则为无边框-->
<table border="1">
	<!--caption标签：定义表格标题-->
	<caption>Monthly saving</caption>
	<tr>
		<!-- th标签:定义表格的表头-->
		<th>Month</th>
		<th>Saving</th>
	</tr>
	<tr>
		<td>Jan</td>
		<td>$100</td>
	</tr>
	<tr>
		<td>Feb</td>
		<td>$50</td>
	</tr>
</table>
<hr />
	
<h4>单元格跨两列：</h4>
<table border="1">
<tr>
	<th>Name</th>
	<!-- colspan属性：跨列，合并后的单元格归属原则都是左上原则，即从上到下从左到右算-->
	<th colspan="2">Tel</th>
</tr>
<tr>
	<td>Bill</td>
	<td>555 77 854</td>
	<td>555 77 855</td>
</tr>
</table>	
	
<h4>单元格跨两行</h4>
<table border="1">			   
<tr>
	<th>Fisrt Name:</th>
	<td>Bill</td>
</tr>
<tr>
	<!-- rowspan属性：跨行，合并后的单元格归属原则都是左上原则，即从上到下从左到右算-->
	<th rowspan="2">Tel:</th>
	<td>555 77 854</td>
</tr>
<tr>
	<td>555 77 855</td>
</tr>
</table>
<hr />

<h4>表格内的标签</h4>
<table border="1">
<tr>
  <td>
   <p>这是一个段落</p>
   <p>这是另一个段落</p>
  </td>
  <td>这个单元格包含一个表格:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>
<hr />
	
<h4>单元格边距</h4>
<!--使用cellpadding创建单元格内容与边框之间的空白-->
<p><i>使用cellpadding创建单元格内容与边框之间的空白</i></p>
<table border="1" cellpadding="10">
<tr>
	<td>First</td>
	<td>Row</td>
</tr>
<tr>
	<td>Second</td>
	<td>Row</td>
</tr>
</table>
<hr />
	
<h4>单元格间距</h4>
<!-- 使用cellspacing 增加单元格之间的距离-->
<p><i>table标签未指定cellspacing->没有单元格间距</i></p>
<table border="1">
<tr>
	<td>First</td>
	<td>Row</td>
</tr>
<tr>
	<td>Second</td>
	<td>Row</td>
</tr>		
</table>
<br />
<p><i>table标签cellspacing="0"</i></p>
<table border="1" cellspacing="0">
<tr>
	<td>First</td>
	<td>Row</td>
</tr>
<tr>
	<td>Second</td>
	<td>Row</td>
</tr>		
</table>
<br />
<p><i>table标签cellspacing="10"</i></p>
<table border="1" cellspacing="10">
<tr>
	<td>First</td>
	<td>Row</td>
</tr>
<tr>
	<td>Second</td>
	<td>Row</td>
</tr>		
</table>
	
</body>
</html>

Lily_25

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
菜鸟教程-HTML小白之实例练习-0804

该篇主要记录了表格标题caption、跨行rowspan或跨列colspan、表格内的标签ui和li、单元格边距(Cell padding)、单元格间距(Cell spacing)等HTML元素使用。
复制链接

扫一扫