html建立表格用到三个标签：

table标签（代表创立一个表格）
tr标签（代表表格中的一行）
td标签（代表表格中的一个单元格）

table标签的属性标签

table学到了八个属性标签：

width	height	border	bordercolor	bgcolor	align	cellspacing	cellpadding
宽度	高度	边框	边框颜色	背景颜色	水平对齐方式	边框与单元格间间距	单元格内部文字与单元格框的间距

下面是一个2*2的表格

   <table border>
       <tr>
        <td>内容1</td>
        <td>内容2</td>
       </tr>
       <tr>
          <td>内容3</td>
          <td>内容4</td>
       </tr>
    </table>

注意：上方的表格中必须有table>tr>td的格式关系，且table内部只能嵌套tr标签，tr标签内部只能嵌套td标签，td标签内部可以嵌套其他标签。

这是一个2*2的表格

width：代表表格整体的宽度，可以是数字，也可以是百分比（这个百分比是相对于父元素标签body标签而言的）。该属性等于数字时其单位为px（像素，可以省略）。
height：代表表格整体的高度，可以是数字，也可以是百分比（也是相对于父元素标签body标签而言的），默认情况下表格的高度是0。该属性等于数字时其单位为px（像素，可以省略）。
border：是规定表格的边框的宽度的属性标签。可以等于任意数字，单位是px，可以省略。

border="0"时的效果，没有边框

border为默认的效果输入 $<table　border></table>$

bordercolor：边框颜色，只设置该项时表格里的单元格没有边框。

bordercolor="crystal green"时的效果，只有表格边框，单元格无边框

bgcolor：是back ground color的缩写，可以用来设置表格整体内容的背景。

属性设置为border bgcolor="crystal green"的结果

align：控制表格整体的水平位置，有三个属性值可以选择：left、right、center，默认情况下表格为水平居左。

让上一个表格在页面中水平居中属性设置在之前的基础上增加align="center"

cellspacing：控制各个单元格间的间距，单位为像素px可以省略，属性值可以填任意数字。控制单元格间的间距为0

设置属性cellspacing="0"

cellpadding：表格单元格的内容和边框之间的距离

该属性设置为cellpadding="1" 即“内容1”到“内容1”所在单元格的四个边框的距离为cellpadding,均为1px

2022年9月10日整理（021课）

tr标签的属性标签

tr标签的属性标签学到了4个：

height	align	valign	bgcolor
该行高度	该行内容水平对齐方式	该行内容垂直方向上的对齐方式	该行的背景颜色

height:可以设置该行的高度，此高度可以大于table的高度属性。**注意：**tr的只具有高度属性不具有宽度属性

<html>
  <body>
      <table border width="300" height="300">
        <tr height="500">
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
      </table>
  </body>
<html>

得到一个如下图片:

一个表格宽度和高度均为300，表格第一行高度为500的2*2的表格

align：该行内容的水平对齐方式，默认情况下居左。有三个属性值可以选择：

left	center	right
水平居左	水平居中	水平居右

<html>
  <body>
      <table border width="300" height="300">
        <tr align="center">
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
      </table>
  </body>
<html>

一个第一行内内容水平居中的表格

valign：该行内容的垂直对齐方式，默认情况下居中。有三个属性值可以选择：
|top|middle|bottom| |---|---|---| |垂直居于顶部|垂直居中|垂直居于底部|

<html>
  <body>
      <table border width="300" height="300">
        <tr align="right" valign="top">
            <td>1</td>
            <td>2</td>
        </tr>
        <tr align="right" valign="top">
            <td>3</td>
            <td>4</td>
        </tr>
      </table>
  </body>
<html>

一个所有内容居于右上角的2*2的表格

td标签的属性标签

td标签中学了5个属性标签

width	height	bgcolor	align	valign
宽度	高度	背景颜色	水平对齐方式	垂直对齐方式

<html>
  <body>
      <table border width="300" height="300">
        <tr >
            <td>1</td>
            <td>2</td>
        </tr>
        <tr >
            <td>3</td>
            <td>4</td>
        </tr>
      </table>
  </body>
<html

创建一个表格：

width：该属性会改变该单元格所在列的宽度。

<html>
  <body>
      <table border width="300" height="300">
        <tr >
            <td width="100">1</td>
            <td>2</td>
        </tr>
        <tr >
            <td>3</td>
            <td>4</td>
        </tr>
      </table>
  </body>
<html

改变了“1”所在单元格的宽度为100px,“3”与“1”同列，“3”所在单元格的宽度也变成100px了

height:该属性能改变单元格所在行的高度。

<html>
  <body>
      <table border width="300" height="300">
        <tr >
            <td ="100">1</td>
            <td>2</td>
        </tr>
        <tr >
            <td>3</td>
            <td>4</td>
        </tr>
      </table>
  </body>
<html

改变了“1”所在单元格的高度为100px,“2”与“1”同行，“2”所在单元格的宽度也变成100px了

bgcolor:改变某单元格处的背景颜色

<html>
  <body>
      <table border width="300" height="300">
        <tr >
            <td bgcolor="pink">1</td>
            <td>2</td>
        </tr>
        <tr >
            <td>3</td>
            <td>4</td>
        </tr>
      </table>
  </body>
<html

将“1”所在的单元格改为粉色

align：该单元格中内容的水平对齐方式。

<html>
  <body>
      <table border width="300" height="300">
        <tr >
            <td align=right>1</td>
            <td>2</td>
        </tr>
        <tr >
            <td>3</td>
            <td>4</td>
        </tr>
      </table>
  </body>
<html

令“1”水平居右

valign：该单元格中内容的垂直方向对齐方式。

<html>
  <body>
      <table border width="300" height="300">
        <tr >
            <td align="right">1</td>
            <td valign="bottom">2</td>
        </tr>
        <tr >
            <td>3</td>
            <td>4</td>
        </tr>
      </table>
  </body>
<html

令“2”垂直方向上居于底部。 2022年9月11日整理（022+023课）

写了一个有点好玩的表格

HTML：关于表格

html建立表格用到三个标签：

table标签的属性标签

tr标签的属性标签

td标签的属性标签