HTML表格精讲-优快云博客

1.10 表格的使用

一，插入表格并定义表格结构< table>，< tr>,< td>

基本语法：
在这里插入图片描述
< table>:定义表结构
< tr>:定义行结构
< td>:定义列结构

实例代码：

<html>
<head>
<title>设置基本表格结构</title>
</head>
<body>
<table width="470" border="1" align="center">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
<tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
<tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
</table>
</body>
</html>

效果：
在这里插入图片描述

二，设置表格标题< caption>

基本语法：
在这里插入图片描述

实例代码：

<html>
<head>
<title>插入表格标题</title>
</head>
<body>
<table width="470" border="1" align="center">
 <caption align="center">计算机语言</caption>
    <tr>
     <td>Dreamweaver</td>
     <td>Access</td>
     <td>C++</td>
   </tr>
   <tr>
     <td>FrontPage</td>
     <td>SQL SERVER 2000</td>
     <td>C#</td>
   </tr>
</table>
</body>
</html>

效果：
在这里插入图片描述

三，设置表格表头< th>

基本语法：
在这里插入图片描述
实例代码：

<html>
<head>
<title>设置表格表头</title>
</head>
<body>
<table width="470" border="1" align="center">
    <tr>
      <th>网页设计</th>
      <th>数据库开发</th>
      <th>程序设计</th>
   </tr>
<tr>
     <td>Dreamweaver</td>
     <td>Access</td>
     <td>C++</td>
   </tr>
<tr>
     <td>FrontPage</td>
     <td>SQL SERVER</td>
     <td>C#</td>
   </tr>
</table>
</body>
</html>

效果：
在这里插入图片描述

四，设置表格的宽度和高度

基本语法：
在这里插入图片描述
实例代码：

<html>
<head>
   <title>设置表格的宽度和高度</title>
</head>
<body>
  <table width="470" height="40" border="1">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
  </table>
  <table width="200" height="80" border="1">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
   </table>
</body>
</html>

效果：
在这里插入图片描述

五，设置表格的边框属性

基本语法:
在这里插入图片描述
border:边框粗细
bordercolor：边框颜色

实例代码：

<html>
<head>
<title>设置表格的边框属性</title>
</head>
<body>
<table width="470" border="1"  bordercolor="#0000FF">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
<tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
<tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
</table>
</body>
</html>

效果：
在这里插入图片描述

六，设置单元格边距与间距

间距：< table cellspacing=数值>
边距：< table cellpadding=数值>

实例代码：

<html>
<head>
<title>设置单元格间距</title>
</head>
<body>
<table width="380" border="1" cellspacing="0">
  <tr>
    <td >&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  </table>
<table width="380" border="1" cellspacing="5">
  <tr>
    <td >&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
 </table>
</body>
</html>

效果：
在这里插入图片描述

七，设置表格背景

基本语法：
在这里插入图片描述

实例代码：

<html>
<head>
<title>设置表格的背景</title>
</head>
<body>
<table width="470" border="1" bgcolor="red" align="center">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
<tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
<tr>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
   </tr>
</table>

</body>
</html>

效果：
在这里插入图片描述

八，设置行内容水平对齐和垂直对齐

基本语法：
在这里插入图片描述

实例代码：

<html>
<head>
<title>调整行内容水平和垂直对齐</title>
</head>
<body>
<table border="1">
     <tr align="center" height=50 valign="bottom">
      <th>网页设计</th>
      <th>数据库开发</th>
      <th>程序设计</th>
   </tr>
  <tr align="center" bordercolor=red bgcolor=yellow>
     <td>Dreamweaver</td>
     <td>Access</td>
     <td>C++</td>
   </tr>
<tr>
     <td>FrontPage</td>
     <td>SQL SERVER</td>
     <td>C#</td>
   </tr>
</table>
</body>
</html>

效果：
在这里插入图片描述

九，设置跨行跨列

基本语法：
在这里插入图片描述
colspan：跨列
rowspan：跨行

实例代码：

<html>
<head>
<title>设置跨行</title>
</head>
<body>
<table width="380" border="1">
   <tr>
    <td rowspan="2">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
   <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
   </tr>
</table>
</body>
</html>

效果：
在这里插入图片描述