【HTML5】表格

表格

  • 表格的基本结构
  • 表格的基本语法
  • 单元格的合并
    • 跨行合并
    • 跨列合并
  • 单元格的对齐方式
    • 水平对齐
    • 垂直对齐
  • 单元格的背景色

表格的基本结构

      1.单元格
         表格的最小单位,一个或多个单元格纵横排列组成了表格。
      2.行
         一个或多个单元格横向排列形成了行。
      3.列
         一个或多个单元格纵向排列形成了行。


表格的基本语法

  HTML Code :


<html>
<head>
	<meta charset="utf-8">
	<title>表格title>
	<style type="text/css">
		table{
			width:500px;
			height:300px;
			text-align: center;
		}
	style>
head>

<body>
	<table border="1">
		<tr height="50">
			<th>表格标题th>
			<th>表格标题th>
			<th>表格标题th>
			<th>表格标题th>
			
		tr>
		
		<tr>
			<td>td>
			<td>td>
			<td>td>
			<td>td>
		tr>
		
		<tr>
			<td>td>
			<td>td>
			<td>td>
			<td>td>
		tr>
		
		<tr>
			<td>td>
			<td>td>
			<td>td>
			<td>td>
		tr>
	table>
body>
html>

  ※如果要创建 M行N列的表格,那么就在

标签中 创建M个标签,在每个标签中 再创建N个表示行 ,
标签。
  代码中没有列的概念,
表示单元格。


单元格的合并

  • 跨行合并

  首先我们新建一个4行3列的表格:
【HTML5】表格_第1张图片
  如上图,如果要合并[一笑奈何]和[芦苇微微]两个单元格,由于它们分别在第一行和第二行,所以我们要使用跨行合并。
  ※合并的过程可以理解为单元格[一笑奈何]要向下“生长”,所以在单元格添加完rowspan属性后,需要删掉阻碍它“生长”的单元格[芦苇微微]。
  如下图,分别是合并两行、三行后的结果。
【HTML5】表格_第2张图片
  HTML Code :


<html>
<head>
	<meta charset="utf-8">
	<title>表格title>
	<style type="text/css">
		table{
			width:500px;
			height:300px;
			text-align: center;
		}
	style>
head>

<body>
	<table border="1">	
		<tr>
			<td rowspan="2">一笑奈何<br />&<br />芦苇微微td>
			<td rowspan="3">愚公爬山<br />&<br />猴子酒<br />&<br />莫扎他td>
			<td>《微微一笑很倾城》td>
		tr>
		
		<tr>
			<td>《微微一笑很倾城》td>
		tr>
		
		<tr>
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
		tr>
		
		<tr>
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
		tr>
	table>
body>
html>
  • 跨列合并

  首先我们新建一个3行4列的表格:
【HTML5】表格_第3张图片
  如上图,如果要合并[一笑奈何]和[芦苇微微]两个单元格,由于它们分别在第一列和第二列,所以我们要使用跨列合并。
  ※合并的过程可以理解为单元格[一笑奈何]要向右“生长”,所以在单元格添加完colspan属性后,需要删掉阻碍它“生长”的单元格[芦苇微微]。
  如下图,分别是合并两列、三列后的结果。
【HTML5】表格_第4张图片
  HTML Code :


<html>
<head>
	<meta charset="utf-8">
	<title>表格title>
	<style type="text/css">
		table{
			width:500px;
			height:300px;
			text-align: center;
		}
	style>
head>

<body>
	<table border="1">	
		<tr>
			<td colspan="2">一笑奈何&芦苇微微td>
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
		tr>
		
		<tr>
			<td colspan="3">愚公爬山&猴子酒&莫扎他td>
			<td>《微微一笑很倾城》td>
		tr>
		
		<tr>
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
		tr>
	table>
body>
html>

单元格的对齐方式

  • 水平对齐
说明
left 左对齐
center 水平居中对齐
right 右对齐

  HTML Code :


<html>
<head>
	<meta charset="utf-8">
	<title>水平对齐title>
	<style type="text/css">
		table{
			width:700px;
			height:300px;
		}
	style>
head>

<body>
	<table border="1">	
		<tr align="left">
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
		tr>
		
		<tr align="center">
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
		tr>
		
		<tr align="right">
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
		tr>
	table>
body>
html>

Result :
【HTML5】表格_第5张图片

  • 垂直对齐
说明
top 顶对齐
middle 垂直居中对齐
bottom 底对齐
baseline 基线对齐

  HTML Code :


<html>
<head>
	<meta charset="utf-8">
	<title>垂直对齐title>
	<style type="text/css">
		table{
			width:700px;
			height:300px;
			text-align: center;
		}
	style>
head>

<body>
	<table border="1">	
		<tr valign="top">
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
		tr>
		
		<tr valign="middle">
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
		tr>
		
		<tr valign="bottom">
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
			<td>《微微一笑很倾城》td>
		tr>
	table>
body>
html>

Result :
【HTML5】表格_第6张图片


单元格的背景色

  HTML Code :


<html>
<head>
	<meta charset="utf-8">
	<title>单元格的背景色title>
	<style type="text/css">
		table{
			width:700px;
			height:300px;
			text-align: center;
		}
	style>
head>

<body>
	<table border="1">	
		<tr>
			<td bgcolor="tomato">《微微一笑很倾城》td>
			<td bgcolor="yellowgreen">《微微一笑很倾城》td>
			<td bgcolor="orange">《微微一笑很倾城》td>
		tr>
		<tr>
			<td bgcolor="orange">《微微一笑很倾城》td>
			<td bgcolor="tomato">《微微一笑很倾城》td>
			<td bgcolor="yellowgreen">《微微一笑很倾城》td>
		tr>
		<tr>
			<td bgcolor="yellowgreen">《微微一笑很倾城》td>
			<td bgcolor="orange">《微微一笑很倾城》td>
			<td bgcolor="tomato">《微微一笑很倾城》td>
		tr>
	table>
body>
html>

Result :
【HTML5】表格_第7张图片


我寻见一片海 碧蓝且耀着光
大片船只航行其上 都向着远方

                         Shared by Foriver_江河



© 1997-8023 江河 All Rights Reserved.

你可能感兴趣的:(【HTML5】)