html表格制作教程,附带完整的html表格代码

作者:IT技术 | 时间:2018-10-30

提起表格我们首先可能想到的就是微软的电子表格excel,在excel里数据可以整齐,有序的展示统计。不过html网页也是可以制作表格的,下面我写了一个详细的html表格制作教程,并且附带了完整的html表格代码,相信大家看完后也能够学会制作表格。

表格制作标签

<table>    定义表格    

<th>    定义表格的表头    

<tr>    定义表格的行    

<td>    定义表格单元    

<caption>    定义表格标题    

<colgroup>    定义表格列的组    

<col>    定义用于表格列的属性    

<thead>    定义表格的页眉    

<tbody>    定义表格的主体    

<tfoot>    定义表格的页脚    

html表格制作教程,附带完整的html表格代码

(1)没有边框的表格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我有答案(www.woyoudaan.cn)</title> 
</head>
<body>
<h4>这个表格没有边框:</h4>
<table>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>
</body>
</html>

 html表格制作教程,附带完整的html表格代码

(2)表格中的标题

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我有答案(www.woyoudaan.cn)</title> 
</head>
<body>

<h4>水平标题:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th>Telephone</th>
  <th>Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>垂直标题:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>Telephone:</th>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

html表格制作教程,附带完整的html表格代码

(3)带有表头的表格

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>我有答案(www.woyoudaan.cn)</title> 
</head>
<body>

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

</body>
</html>

html表格制作教程,附带完整的html表格代码

(4)细线表格

表格自身的border=0

<table  width='600' cellpadding='0' cellspacing='1' bgcolor='black'>
<tr bgcolor='white'>
	<td>1.1</td>
	<td>1.2</td>
	<td>1.3</td>
</tr>

<tr bgcolor='white'>
	<td>2.1</td>
	<td>2.2</td>
	<td>2.3</td>
</tr>

<tr bgcolor='white'>
	<td>3.1</td>
	<td>3.2</td>
	<td>3.3</td>
</tr>
</table>

html表格制作教程附带完整html表格代码

其实还有更复杂更好看的表格,大需要用到css知识,但目前讲解是表格基础,大家先把这些基础的掌握好,后面制作更复杂的就不是什么大问题了。下面提供一个复杂表格供大家预览:

html表格制作教程附带完整html表格代码

通过上面的html表格制作教程和附带的表格代码,大家掌握了如何制作表格了吗?