HTML

由 hrs, 12 十一月, 2019

HTML实例-058 html 表格的边距

标签
HTML

在编辑网页表格的时候，我们需要对表格的边距进行设置，我们可以使用 Cell padding 来创建单元格内容与其边框之间的空白。

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<h3>这是一个没有边距的实例</h3>
<table  border="1">
    <tr>
        <td>张三</td>
        <td>12345</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>67890</td>
        </tr>
</table>
<h3>这是一个有边距的实例</h3>
<table  border="1" cellpadding="10">
    <tr>
        <td>张三</td>
        <td>12345</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>67890</td>
        </tr>
</table>
</body>
</html>

运行效果：

html_058.png

从这个实例中看到，第一个实例表格跟文本之间没有任何边距，看起不是很好看，第二表格我们设置了cellpadding=10来定义它的边距，输出后明显有变化，表格和文本之间有10个像素的间距 。

评论

由 hrs, 11 十一月, 2019

HTML实例-057 html 表格的嵌套

标签
HTML

这一节我们来学习表格的嵌套，我们可以在一个单元格嵌套段落标签，表格，列表等等。下面我们就来做个实例。

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
<head>
<html>
<body>
<table border="1">
<tr>
  <td>
<p>这是一个段落</p>
<p>这是另一个段落</p>
</td>
  <td>
<p>这个单元包含一个表格</p>
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
  <td>
<p>这个单元包含一个列表</p>
<ul>
<li>小学</li>
<li>中学</li>
<li>高中</li>
</ul>
</td>
  <td>Hello</td>
</tr>
</table>
</body>
</html>

运行效果：

html_057.png

从这个表格中看出，我们在表格中嵌套了很多种标签，有段落p标签，有表格table标签，有列表ul标签。

 

评论

由 hrs, 11 十一月, 2019

HTML实例-056 html跨行或跨列的表格单元格

标签
HTML

如果我们在编辑html表格中遇到表格需要合并怎么办？这一节我们就来学习表格的合并

实例代码：

<!doctype html >
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<h4>跨两列的单元格</h4>
<table border="1">
<tr>
  <th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
  <td>张三</td>
<td>0660-6638258</td>
<td>13258245621</td>
</tr>
</table>
<h4>跨两行的单元格</h4>
 <table border="1">
<tr>
<th>姓名</th>
<td>张三</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>0660-6638258</td>
</tr>
<tr>
<td>13258245621</td>
</tr>

</table>
</body>
</html>

运行效果：

html_056.png

从这两个实例中看出，我们用了表格的两个合并属性colspan: 合并列，在实例中我们第一行第二和第三单元格进行合并。

rowspan:合并行  在下面的实例中我们第二行的第一个单元格和第三行的第一个单元格进行合并。

 

评论

由 hrs, 11 十一月, 2019

HTML实例-055 表格中的空单元格和占位符

标签
HTML

有时候我们会在表格中遇到空值，这时我们在表格中就无法显示出来。下面我们就来做一个实例。

实例代码：

<!doctype html>
<head>
  <meta charset="utf-8">
<head>
<html>
  <body>
    <p>这是一个表格空值实例</p>
    <table border="1">
       <tr>
           <th>姓名</th>
          <th>年龄</th>

       </tr>
       <tr>
	<td>张三</td>
	<td>35</td>

	</tr>
        <tr>
	  <td>&nbsp;</td>
	  <td>48</td>

	</tr>
	<tr>
	  <td>王五</td>
	  <td>&nbsp;</td>

	</tr>


    </table>
<pre>注意：这个空的单元格的边框没有被显示出来。
为了避免这种情况，在空单元格中添加一个空格占位
符，就可以将边框显示出来。</pre>
  </body>
</html>

运行效果：

html_055.png

从这个实例中看出，我们在第二行表格第一个数据格为空，第三行表格第二个数据为空，来测试空值是否对表格的边框产生影响，但测试后我基本没有影响，还是会显示。

但是我们还给它加上个空值占位符好一点。空值占位符：&nbsp;

 

评论

由 hrs, 11 十一月, 2019

HTML实例-054 HTML带有边框的表格

标签
HTML

这一个实例我们给表格加个边框 

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
<head>
<html>
<body>
<p>这是一个改变表格边框大小的实例</p>
<h3>这是border值为等于1的边框</h3>
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>35</td>
</tr>
</table>
<h3>这是border值为等于8的边框</h3>
<table border="8">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>35</td>
</tr>
</table>
<h3>这是border值为等于15的边框</h3>
<table border="15">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>35</td>
</tr>
</table>
</body>
</html>

运行效果：

html_054.png

从这个实例中看出，我们设置border边框值的大小，表格的边框就会随着值的改变而改变。

  • 表格和边框属性:border

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

  • 表格的表头 :th

表格的表头使用 <th> 标签进行定义，大多数浏览器会把表头显示为粗体居中的文本。

 

评论

由 hrs, 11 十一月, 2019

HTML实例-053 HTML的表格制作

标签
HTML

在html网页编辑中，我们经常会遇到带有数据的表格，这些表格在html中是怎么定义的呢？下面我们就来学习一下。

实例代码：

<!dotype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<P>每个表格由talbe 标签开始</p>
<p>每个表格的行由tr标签开始</p>
<p>每个表格的数据由td标签开始</p>
<h3>这是一个两行二列的表格实例</h3>
<table border="1">
     <tr> 
            <td>姓名</td>
            <td>年龄</td>
     </tr>
     <tr>
            <td>张三</td>
            <td>35</td>
     </tr>
</table>

</body>
</html>

运行效果：

html_053.png

从这个实例中我们创建了一个两行二列表格 ，在这里我们用到table 标签是创建表格 ，tr标签是创建表格的列， td标签是创建表格的数据。

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

评论

由 hrs, 8 十一月, 2019

HTML实例-052 HTML为图像创建映射

标签
HTML

实例代码：


<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<p>这是一个图像的映射实例</p>
<img src="china_map.jpeg">
</body>
</html>

 

 

 

未完待续……

评论

由 hrs, 8 十一月, 2019

HTML实例-051 html 把图像作为链接使用

标签
HTML

在html编辑中，我们经常会用到图像作为链接，点击图像就会链接到另一个网页或主页。下面我们就来学习一下。

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
</head>

<html>
<body>
<p>这是一个图像链接实例</p>
<a href="https://www.dwoke.com">你行网
<img src="dwoke.png" alt ="你行网">
</a>
<p>这是一个链接到你行网的图片链接</p>
</body>
</html>

运行效果：

html_051.png

从这个实例中看出，当你点击图像或下面的超级链接都会带到你行网的主页上。

 

评论

由 hrs, 8 十一月, 2019

HTML实例-050 HTML为图片显示替换文本

标签
HTML

有时候我们会遇到网页图片加载失败的情况，这时网页就会显示一个加载图片的图像。如果我们定义了图像alt属性，就会显示替换文本。

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
<style>
img{
width:50px;
height:50px;

}
</style>
</head>
<html>
<body>
<p>这是一个加载图像正常的实例</p>
<br />
<img src="cat.jpeg" alt="小猫咪">
<br />
<p>这是一个加载图像失败的实例</p>
<img src="cat123.jpeg" alt="小猫咪">
</body>
</html>

运行效果：

html_050.png

 

 

评论

由 hrs, 7 十一月, 2019

HTML实例-049 HTML图像调整大小

标签
HTML

在html 我们要对图像进行大小设置，我们该如何时行定义呢？下面我们就来做一个实例。

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
</head>
<html>
<body>
<p>这是一个50像素的图像
<img src="cat.jpeg" align="middle" width="50" height="50">
</p>
<p>这是一个80像素的图像
<img src="cat.jpeg" align="middle" width="80" height="80">
</p>
<p>这是一个100像素的图像
<img src="cat.jpeg" align="middle" width="100" height="100">
</p>
<p>所有图像都位于文本之间对齐 </p>
</body>
</html>

运行效果：

html_049.png

从这三个图像中看出，我们对三个图像都进行了大小定义。第一个为50像素，第二个为80像素，第三个为100像素。而且都 位于文本中间对齐。

评论

HTML