HTML(2)--表格

标签<div></div>

    作用：专门用来为网站化板块

标签<span></span>

    作用：某一个文字或一小段文本

表格

    作用：显示数据

     

<!--
        	表格
        		<tr>行</tr>
        		<td>列</td>
        		属性：
        		width="表格中的宽"
        		height="表格的高"
        		border="表格的边框"
        		bordercolor="表格边框的颜色"
        		cellspacing="单元格于单元格之间的距离"
        		cellpadding="单元格于内容之间的距离"
        		align:作用：水平对其方式 放在table中是控制表格，放在tr中是控制这一行单元格的内容，放在td中是控制这一个单元格中的内容
        			属性值
        			right:右
        			left:左
        			center:居中	
        -->
		<table border="1" cellspacing="0" cellpadding="0" align="right">
			<tr align="right">
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>

   --和并单元格

       和并单元格原则：只要跨行的都是合并行，不是跨行的都是合并列，无论合并行还是合并列操作的都是td

            和并单元格属性:

              colspan="所要合并的单元格的列数";
              rowspan="所要合并单元隔的行数" 

<!--
        	合并原则：只要跨行的都是合并行，不是跨行的都是合并列，无论合并行还是合并列操作的都是td
        		合并单元格属性：
        		colspan="所要合并的单元格的列数";
        		rowspan="所要合并单元隔的行数"
        -->
        <!--合并列-->
        <table border="1" cellpadding="0" cellspacing="0" align="left" width="40" height="20">
        	<tr align="center">
        		<td colspan="2">1</td>
        	
        		<td>3</td>
        	</tr>
        	<tr align="center">
        		<td>1</td>
        		<td>2</td>
        		<td>3</td>
        	</tr>
        	
        </table>
        <!--合并行-->
         <table border="1" cellpadding="0" cellspacing="0"  width="40" height="20">
        	<tr align="center">
        		<td rowspan="2">1</td>
        		<td>2</td>
        		<td>3</td>
        	</tr>
        	<tr align="center">
        		
        		<td>2</td>
        		<td>3</td>
        	</tr>
        	
        </table>

      --和并单元格练习：一个小的和并单元格的练习，难点：一个单元格需要即合并行又和并列，基本前面所聊的属性都有用到

	<table cellpadding="0" bordercolor="#FFB6C1" cellspacing="0" border="1" width="1000" height="470">
			<tr align="center">
				<td>1</td>
				<td width="260"></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td width="260"></td>
			</tr>
			<tr align="center">
				<td>2</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center">
				<td>3</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center">
				<td>4</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center">
				<td>5</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center">
				<td>6</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center">
				<td width="50" rowspan="4">7</td>
				<td></td>
				<td colspan="2" rowspan="4"></td>
				
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center">
				
				<td></td>
				
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center">
				
				<td></td>
				
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center">
				
				<td></td>
				
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center">
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center">
				<td colspan="3"></td>
				
				<td colspan="3"></td>
				
				<td colspan="2"></td>
			</tr>
		</table>