8.表格

第八节表格

1.标准的表格

table:表格标签

aligh:对齐方式

cellpading:规定单元边沿与其内容之间的空白。

cellspacing:属性规定的是单元之间的空间

tr:行

td:列

th:表头

横向合并

colsapn=“number”:合并横向的表格

代码:

  <table border="1px" align="center" cellpadding="0px" cellspacing="0px" width="800px">
  	<tr>
  		<th colspan="3">横着的表头</th>
  	</tr>
  	<tr>
  		<th>表头1</th>
  		<th>表头2</th>
  		<th>表头3</th>
  	</tr>
  	<tr>
  		<td>1</td>
  		<td>1</td>
  		<td>1</td>
  	</tr>
  	<tr>
  		<td>1</td>
  		<td>1</td>
  		<td>1</td>
  	</tr>
  	<tr>
  		<td>1</td>
  		<td>1</td>
  		<td>1</td>
  	</tr>
  </table>

演示:

横着的表头
表头1 表头2 表头3
1 1 1
1 1 1
1 1 1

竖向合并

rowspan=“number”:合并竖向的表格

代码:

<table border=“1px” align=“center” cellpadding=“0px” cellspacing=“0px” width=“800px”>

竖着的表头
表头1
1
1
1


表头1
1
1
1


表头1
1
1
1


表头1
1
1
1

演示:

竖着的表头 表头1 1 1 1
表头1 1 1 1
表头1 1 1 1
表头1 1 1 1

2.表格的框架

框架主要的区别就是在于表格的边框的方向不一样

box框架

代码:

<table frame=“box” cellspacing=“0px” cellpadding=“0px” width=“800px” align=“center”>

months
saves


January
$400


May
$400

演示:

months saves
January $400
May $400

above框架

代码:

<table frame=“above” cellspacing=“0px” cellpadding=“0px” width=“800px” align=“center”>

months
saves


January
$400


May
$400

演示:

months saves
January $400
May $400

below框架

代码:

<table frame=“below” cellspacing=“0px” cellpadding=“0px” width=“800px” align=“center”>

months
saves


January
$400


May
$400

演示:

months saves
January $400
May $400

hsides框架

代码:

<table frame=“hsides” cellspacing=“0px” cellpadding=“0px” width=“800px” align=“center”>

months
saves


January
$400


May
$400

演示:

months saves
January $400
May $400

vsides框架

代码:

<table frame=“vsides” cellspacing=“0px” cellpadding=“0px” width=“800px” align=“center”>

months
saves


January
$400


May
$400

演示:

months saves
January $400
May $400

hsides框架

代码:

<table frame=“hsides” cellspacing=“0px” cellpadding=“0px” width=“800px” align=“center”>

months
saves


January
$400


May
$400

演示:

months saves
January $400
May $400

lhs框架

代码:

<table frame=“lhs” cellspacing=“0px” cellpadding=“0px” width=“800px” align=“center”>

months
saves


January
$400


May
$400

演示:

months saves
January $400
May $400

rhs框架

代码:

<table frame=“rhs” cellspacing=“0px” cellpadding=“0px” width=“800px” align=“center”>

months
saves


January
$400


May
$400

演示:

months saves
January $400
May $400
发布了30 篇原创文章 · 获赞 16 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_35653657/article/details/104587000