HTML中table（表格知识点）

Posted 2022-12-19 胡开心同学

1基础知识

1.1表格标记

1.table代表表格，tr表示一行，td表示一个单元格

<table border="" cellspacing="" cellpadding="">
			<tr><td>Data</td></tr>
			<tr><td>Data</td></tr>
		</table>

 1.2表格表头、表格标题

1 <th></th>表示表头，可以看成特殊的<td></td>,用于表示一个单元格，但其有给字体加粗的效果

<table border="" cellspacing="" cellpadding="">
			<tr><th>Data</th></tr>
			<tr><td>Data</td></tr>
		</table>

 2 标题caption

<table border="" cellspacing="" cellpadding="">
			<caption>我是表格的标题</caption>
			<tr><th>Data</th></tr>
			<tr><td>Data</td></tr>
		</table>

2表格美化

2.1单元格间隙重叠

1border-collapse

         <style>
            table
				font-size: 10px;
				border-collapse: collapse;
			
		</style>
<table border="" cellspacing="" cellpadding="">
			<tr><th>Data</th></tr>
			<tr><td>Data</td></tr>
		</table>

 2.2表格边框

1如何为表格设置边框

利用table标签里的border属性，为border属性设置属性值，此在结构中设置

<table border="2" cellspacing="" cellpadding="">
			<tr><th>Data</th></tr>
			<tr><td>Data</td></tr>
</table>

 

 2利用css样式综合为边框进行设置

例如border-color设置表格边框、border-bottom-radius设置单元格下发角度等等，可以举一反三设置单元格上、下、左、右。单元格同样进行设置，只不过要用后代选择器以及别的选择器，精准选择到所要设置的<td>

CSS样式	
            table
				font-size: 10px;
				/*border-collapse: collapse;*/
				border-radius: 5px;
				border-color: green;
			

        结构
        <table border="2" cellspacing="" cellpadding="">
			<tr><th>Data</th></tr>
			<tr><td>Data</td></tr>
		</table>