HTML制作表格

最新推荐文章于 2024-07-26 14:13:22 发布

常戚戚

最新推荐文章于 2024-07-26 14:13:22 发布

阅读量3k

点赞数 1

原文：http://www.360doc.com/content/13/0228/15/9060464_268443410.shtml#

一、制作简单的表格

制作表格时，首先应该利用<table> </table> 标签表明需要做一个表格。

其次，利用<tr></tr>标签制作一行，然后再横列中利用<td></td>制作出列

然后，重复第二步，做下一行

1，简单的表格

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <table border=1> //-------border参数是设定表格的外框线粗细的------
 <tr>            // ------一行-----------
   <td>1</td>
   <td>2</td>
   <td>3</td>     //---------三列-----------
 </tr>
 <tr>
   <td>4</td>
   <td>5</td>
   <td>6</td>
 </tr>
 </table>
</body>
</html>

二、合并表格栏

左右栏合并

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <table border=1>
 <tr>
   <td colspan=3>1</td>
 
 </tr>
 <tr>
   <td>4</td>
   <td>5</td>
   <td>6</td>
 </tr>
 </table>
</body>
</html>

这里 colspan 就是左右栏合并的属性。 colspan=3 即这个栏位横跨了3个栏位

上下栏合并

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <table border=1>
 <tr>
   <td rowspan=2>1</td>
   <td>2</td>
   <td>3</td>
 
 </tr>
 <tr>
    //-------这里需要把上面要合并的那栏的<td>去掉-----------
   <td>5</td>
   <td>6</td>
 </tr>
 </table>
</body>
</html>

三、表格对齐设置

1、设定表格大小

通过 width 和 height来设置宽度和高度

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <table border=1 height="40" width="100"> //----设置宽度和高度-----
 <tr>
   <td align=center>1</td>  //-----将一个单元格内容放置在中间------
 </tr>
 
 </table>
</body>
</html>

还可以在<td> 内通过align=center /right /left 来设置内容的位置。当然也可以通过valign = top /middle/bottom 让表格中物件靠上、中、下位置。

四、表格背景设置

1、设定底色

利用bgcolour="颜色码"设置，如果想设置整个table的背景，将bgcolour="颜色码"放置在<table>中，如果只设置一行的背景，将bgcolour="颜色码"放置在<tr>中，如果只改变一个单元格的背景，将bgcolor="颜色码"放置在<tr> 中即可。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <table border=1 height="40" width="80">
 <tr>
   <td>1</td>
   <td>1</td>
   <td>1</td> 
 </tr>
  <tr bgcolor=#FFCC33>
   <td>2</td>
   <td>2</td>
   <td>2</td> 
 </tr>
 </table>
</body>
</html>

通过使用javascript 里面的document.write来实现表格里面数据的显示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var rows = 6;
var cols = 5;

document.write("<table  border=1>");
 
    for(var i=1;i<rows;i++)  //-----行-----
    	{
    	document.write("<tr>");
    	for(var j=1;j<cols;j++){   //----列------
    	document.write("<td>"+ i*j + "</td>"); //-----每个单元格里面的内容-------
    	}
    	document.write("</tr>");
 }
 
 
document.write("</table>");
</script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var rows = 9;
var cols = 9;

document.write("<table  border=1>");//------九九乘法表-------
 
    for(var i=1;i<rows;i++)
    	{
    	document.write("<tr>");
    	for(var j=1;j<cols;j++){
    		if(j<=i){
    	document.write("<td>"+ i+"*"+j+"="+i*j + "</td>");}
    		else{document.write("<td>&nbsp</td>");} // ----希望表格输出有没有内容时 就用&nbsp！注意格式,三个均在引号内-------
    	}
    	document.write("</tr>");
 }
document.write("</table>");
</script>
</head>
<body>
</body>
</html>

输出：