HTML 表格

HTML 表格 HTML 表格实例: 在线实例 表格 这个例子演示如何在 HTML 文档中创建表格。

< !DOCTYPE html>
< html>
< head> 
< meta charset="utf-8"> 
< title>logo大咖网< /head>
< body>

< p>
每个表格从一个 table 标签开始。 
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
< /p>

< h4>一列:< table border="1">
< tr>
  < td>100< /tr>
< /table>

< h4>一行三列:< table border="1">
< tr>
  < td>100< td>200< td>300< /tr>
< /table>

< h4>两行三列:< table border="1">
< tr>
  < td>100< td>200< td>300< /tr>
< tr>
  < td>400< td>500< td>600< /tr>
< /table>

< h4>两行三列:< table border="1">
< tr>
  < td>100< td>200< td>300< /tr>
< tr>
  < td>400< td>500< td>600< /tr>
< /table>

< /body>
< /html>

HTML 表格

表格由标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由

									
									
									
									
									
									
									
									
									
									
									
									

										
										

											
											

												
												

													row 1, cell 1
												

												

													row 1, cell 2
												

											

											

												
												

													row 2, cell 1
												

												

													row 2, cell 2
												

											

										

									

在浏览器显示如下：:

HTML 表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

														
														
														
														
														
														
														
														
														
														

															
															

																
																

																	
																	

																		Row 1, cell 1
																	

																	

																		Row 1, cell 2
																	

																

															

														

HTML 表格表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

														
														
														
														
														
														
														
														
														

															
															

																
																

																	
																	

																		Header 1
																	

																	

																		Header 2
																	

																

																

																	
																	

																		row 1, cell 1
																	

																	

																		row 1, cell 2
																	

																

																

																	
																	

																		row 2, cell 1
																	

																	

																		row 2, cell 2
																	

																

															

														

在浏览器显示如下：

没有边框的表格
本例演示一个没有边框的表格。

< !DOCTYPE html>
< html>
< head> 
< meta charset="utf-8"> 
< title>logo大咖< /head>
< body>

< h4>这个表格没有边框:< table>
< tr>
  < td >100< td >200< td >300< /tr>
< tr>
  < td>400< td>500< td>600< /tr>
< /table>

< h4>这个表格没有边框:< table border="0">
< tr>
  < td>100

< !DOCTYPE html>
< html>
< head> 
< meta charset="utf-8"> 
< title>logo大咖< /head>
< body>

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

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

< /body>
< /html>

< !DOCTYPE html>
< html>
< head> 
< meta charset="utf-8"> 
< title>logo大咖< /head>
< body>

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

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

< /body>
< /html>

< !DOCTYPE html>
< html>
< head> 
< meta charset="utf-8"> 
< title>logo大咖< /head>
< body>

< h4>单元格跨两格:< table border="1">
< tr>
  < th>Name< th colspan="2">Telephone< /tr>
< tr>
  < td>Bill Gates< td>555 77 854< td>555 77 855< /tr>
< /table>

< h4>单元格跨两列:< table border="1">
< tr>
  < th>First Name:< td>Bill Gates< /tr>
< tr>
  < th rowspan="2">Telephone:< td>555 77 854< /tr>
< tr>
  < td>555 77 855< /tr>
< /table>

< /body>
< /html>

< !DOCTYPE html>
< html>
< head> 
< meta charset="utf-8"> 
< title>logo大咖< /head>
< body>

< table border="1">
< tr>
  < td>
   < p>这是一个段落
														

															


														
< p>这是另一个段落
														

															


														
< /td>
  < td>这个单元格包含一个表格:
   < table border="1">
   < tr>
     < td>A< td>B< /tr>
   < tr>
     < td>C< td>D< /tr>
   < /table>
  < /td>
< /tr>
< tr>
  < td>这个单元格包含一个列表
   < ul>
    < li>apples< li>bananas< li>pineapples< /ul>
  < /td>
  < td>HELLO< /tr>
< /table>

< /body>
< /html>

< !DOCTYPE html>
< html>
< head> 
< meta charset="utf-8"> 
< title>logo大咖< /head>
< body>

< h4>没有单元格边距:< table border="1">
< tr>
  < td>First< td>Row< /tr>   
< tr>
  < td>Second< td>Row< /tr>
< /table>

< h4>有单元格边距:< table border="1" cellpadding="10">
< tr>
  < td>First< td>Row< /tr>   
< tr>
  < td>Second< td>Row< /tr>
< /table>

< /body>
< /html>

< !DOCTYPE html>
< html>
< head> 
< meta charset="utf-8"> 
< title>logo大咖 /head>
< body>

< h4>没有单元格间距:< table border="1">
< tr>
  < td>First< td>Row< /tr>
< tr>
  < td>Second< td>Row< /tr>
< /table>

< h4>单元格间距="0":< table border="1" cellspacing="0">
< tr>
  < td>First< td>Row< /tr>
< tr>
  < td>Second< td>Row< /tr>
< /table>

< h4>单元格间距="10":< table border="1" cellspacing="10">
< tr>
  < td>First< td>Row< /tr>
< tr>
  < td>Second< td>Row< /tr>
< /table>

< /body>
< /html>

HTML 表格标签