HTML中table(表格知识点)

  • Post author:
  • Post category:其他

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>

版权声明:本文为qq_67896626原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。