HTML笔记（三）

最新推荐文章于 2022-03-07 09:33:43 发布

JKay_Wong

最新推荐文章于 2022-03-07 09:33:43 发布

阅读量890

点赞数

分类专栏： WebDev 文章标签： html border table 浏览器电话 basic

本文链接：https://blog.csdn.net/jkay_wong/article/details/7241037

版权

WebDev 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

表格的表头

表格的表头使用 <th> 标签进行定义。

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下：

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

表格中的空单元格

在大多数浏览器中，没有内容的表格单元显示得不太好。

为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td>
</tr>
</table>

在浏览器中显示如下：

row 1, cell 1	row 1, cell 2
row 2, cell 1

<table> 或者 <table borde="0"> 制作出来的表格都是没有边框的

<html>
<body>
	<table border="4">
	<caption> Basic Information </caption>
	<tr>	
		<th> Name </th>	<th> Sex </th>
	</tr>
	<tr>
		<td>Wangjiakai</td> <td>Male </td>
	</tr>
	<tr> 
		<td>Liudan </td> <td>Female </td>
	</tr>
	<tr>
		<td>RenYao</td> <td> </td>
	</tr>
	</table>
	<br/>
	<h4> 横跨两列的单元格：</h4>
	<table border="1">
	<tr> 
		<th> 姓名 </th> <th colspan="2"> 电话 </th>
	</tr>
	<tr> 
		<td> Bill </td> <td> 229 321232 </td> <td> 885 121232 </td>
	</tr>
	</table>
	
	<br/>
	<h4> 横跨两行的单元格： </h4>
	<table border="1">
	<tr>
		<th> 姓名 </th> <td> Kate </td>
	</tr>
	<tr>
		<th rowspan="2"> 电话 </th> <td> 221 2123321 </td> 
	</tr>
	<tr>
		<td> 123312 1241 </td>
	</tr>
	</table>
	
</body>
</html>

显示结果

<html>

<body>

<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>苹果</li>
    <li>香蕉</li>
    <li>菠萝</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>
</html>

表格标签

表格	描述
<table>	定义表格
<caption>	定义表格标题。
<th>	定义表格的表头。
<tr>	定义表格的行。
<td>	定义表格单元。
<thead>	定义表格的页眉。
<tbody>	定义表格的主体。
<tfoot>	定义表格的页脚。
<col>	定义用于表格列的属性。
<colgroup>	定义表格列的组。

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下：

Coffee
Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表以<ol></ol>标签开始和结束

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

浏览器显示如下：

Coffee

Black hot drink

Milk

White cold drink

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

列表标签

标签	描述
<ol>	定义有序列表。
<ul>	定义无序列表。
<li>	定义列表项。
<dl>	定义定义列表。
<dt>	定义定义项目。
<dd>	定义定义的描述。
<dir>	已废弃。使用 <ul> 代替它。
<menu>	已废弃。使用 <ul> 代替它。

JKay_Wong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML笔记（三）

表格的表头表格的表头使用标签进行定义。HeadingAnother Headingrow 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2在浏览器显示如下：HeadingAnother Headingrow 1, cell 1row 1, cell 2
复制链接

扫一扫

专栏目录