HTML中table表格的基本语法应用和布局思路、表格的跨行跨列、表格相关所有标签。 HTML 列表相关标签、有序列表、无序列表、定义列表

第3章HTML表格的应用布局和HTML 列表相关标签

  • 一、表格的基本语法
    • 1、表格—— table 标签、tr 标签、td 标签
  • 二、表格的跨行跨列
    • 1、跨行—— rowspan 属性,跨列—— colspan 属性
  • 三、table表格高级标签的配合使用
    • 1、表格标题—— caption 标签,
      • 页眉—— thead 标签,
      • 数据主体—— tbody 标签,
      • 页脚—— tfoot 标签
    • 2、组合表格中的列—— colgroup标签,
      • 改变整列样式—— col 标签
  • 四、表格布局和实际应用
    • 1、同列单元格宽度由最大的单元格决定
    • 2、同行单元格高度由最高的单元格决定
    • 3、对于复杂的页面,如使用表格则必须采用多层嵌套
    • 4、嵌套的表格布局的缺点
    • 5、表格布局仅适用于什么时候
    • 6、表格布局的实现思路
  • 五、有序列表、无序列表、定义列表
    • 1、有序列表 —— ol 标签、li 标签
    • 2、无序列表—— ul 标签、li 标签
    • 3、定义描述列表—— dl 标签、dt 标签、dd 标签
    • 4、与列表相关但被弃用的标签

一、表格的基本语法

1、表格—— table 标签、tr 标签、td 标签


<table border="边的大小" align="center">

    <tr>
         <td>一行一列td>
         <td>一行二列td>
 	......
   tr>
    <tr>
         <td>二行一列td>
         <td>二行二列td>
	......
    tr>
table>

二、表格的跨行跨列

1、跨行—— rowspan 属性,跨列—— colspan 属性


<td colspan="横排合并格数">跨列td>
<td rowspan="竖排合并格数">跨行td>

三、table表格高级标签的配合使用

1、表格标题—— caption 标签,

页眉—— thead 标签,

数据主体—— tbody 标签,

页脚—— tfoot 标签



<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>table表格高级标签的配合使用title>
head>
<body>
	<table border="0"  style="text-align:center;">
		
		<caption>表格标题caption>
		<thead style="background:#00ffff;" >
			<tr>
				<th>表头1th>
				<th>表头2th>
			tr>
		thead>
		<tbody style="background:#99cccc">
			<tr>
				<td>数据1行1列td>
				<td>数据1行2列td>
			tr>
			<tr>
				<td>数据2行1列td>
				<td>数据2行2列td>
			tr>
			<tr>
				<td>数据3行1列td>
				<td>数据3行2列td>
			tr>
		tbody>
		<tfoot style="background:#ffff00">
			<tr>
				<td>底部1td>
				<td>底部2td>
			tr>
		tfoot>
		
	table>
body>
html>

在浏览器中显示为:
HTML中table表格的基本语法应用和布局思路、表格的跨行跨列、表格相关所有标签。 HTML 列表相关标签、有序列表、无序列表、定义列表_第1张图片

2、组合表格中的列—— colgroup标签,

改变整列样式—— col 标签



<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>table表格高级标签的配合使用title>
head>
<body>
	<table border="0"  style="text-align:center;">
		
	<colgroup>
		
	    <col span="2" style="background-color:red" />
	    
	    <col style="background-color:yellow" />
	    
	colgroup>
		<caption>表格标题caption>
		<thead>
			<tr>
				<th>表头1th>
				<th>表头2th>
				<th>col列th>
			tr>
		thead>
		<tbody>
			<tr>
				<td>数据1行1列td>
				<td>数据1行2列td>
				<td>数据1行3列td>

			tr>
			<tr>
				<td>数据2行1列td>
				<td>数据2行2列td>
				<td>数据2行3列td>
			tr>
			<tr>
				<td>数据3行1列td>
				<td>数据3行2列td>
				<td>数据3行3列td>
			tr>
		tbody>
		<tfoot>
			<tr>
				<td>底部1td>
				<td>底部2td>
				<td>底部3td>
			tr>
		tfoot>
		
	table>
body>
html>

在浏览器中显示为:

HTML中table表格的基本语法应用和布局思路、表格的跨行跨列、表格相关所有标签。 HTML 列表相关标签、有序列表、无序列表、定义列表_第2张图片

四、表格布局和实际应用

1、同列单元格宽度由最大的单元格决定

2、同行单元格高度由最高的单元格决定

3、对于复杂的页面,如使用表格则必须采用多层嵌套

4、嵌套的表格布局的缺点

(1)代码量大
(2)层次结构也相对复杂
(3)不利于Goole等搜索引擎搜索查找数据

5、表格布局仅适用于什么时候

(1)规则的数据显示
(2)表单页面

6、表格布局的实现思路

需要几行几列的表格?哪些单元格有跨行或跨列?编写表格代码实现。

五、有序列表、无序列表、定义列表

1、有序列表 —— ol 标签、li 标签

(1)

    标签定义了一个有序列表. 列表排序以数字来显示,使用
  1. 标签来定义列表选项。

    <ol>
    	<li>有序列表li>
    	...
    ol>
    

    示例1:
    在这里插入图片描述

    2、无序列表—— ul 标签、li 标签

    (1)

      标签定义无序列表。用
    • 标签来定义列表选项。

      <ul>
      	<li>无序列表li>
      	...
      ul>
      

      示例2:
      在这里插入图片描述

      3、定义描述列表—— dl 标签、dt 标签、dd 标签

      (1)

      标签定义一个描述列表。
      (2)
      标签与
      (定义项目/名字)和
      (描述每一个项目/名字)一起使用。
      (3)这种效果可以和无序列表互相代替因dt是块状元素,所以常用于图文混编的布局场合。

      <dl>
      	<dt>标题dt>
      	<dd>描述dd>
      dl>
      

      示例3:
      在这里插入图片描述

      4、与列表相关但被弃用的标签

      (1)

      标签被用来定义目录列表。在 HTML 4.01 中, 元素已废弃。
        标签替代了它。
        (2)定义了一个命令列表或菜单。这个元素在HTML4中被弃用,但再HTML5.1(正在起草中)中被重新推荐使用。目前,主流浏览器都不支持。
        (3)标签用于定义命令按钮。目前,主流浏览器都不支持。

你可能感兴趣的:(HTML/HTML5学习笔记)