html css画表格

实例

<style type="text/css">
table{
	border-collapse: collapse;   /*外边框-折叠：折叠*/
			text-align: center;    /*文本-对齐：居中*/
			width: 850px;         /*高度*/
			margin: 20px auto;     /*内边框：上20px 右：自动*/
}
table caption{
	font-size: 2rem;     /*字体-大小*/
    font-weight: bolder; /*字体-重量：加粗*/
    color: red;  /*颜色：红色*/
    margin-bottom:50px /*内边框-下*/

}

table,tr,th{
	border: 2px solid blue;
}

	table tr:first-child {
	}



table tr:hover {
	background-color: #000;
	color:#988;
}

table tr th img{
	padding: 7px;
	border-radius: 10px;
	width: 100px;
	}

th{
	padding: 15px;
}


</style>

<table>
	<caption>各岗位观察表</caption>

	<tr>
	<th><img src="https://img.php.cn//upload/image/426/710/332/1534309094483586.jpg"></th>
	<th>老板</th>
	<th>产品</th>
	<th>程序员</th>
	<th>设计</th>
	<th>运营</th>
	<th>运维</th>
	</tr>

	<tr>
	<th>老板眼中</th>
	<th>未来上市公司老总</th>
	<th>傻逼</th>
	<th>傻逼</th>
	<th>傻逼</th>
	<th>傻逼</th>
	<th>极度傻逼</th>
	</tr>

	<tr>
	<th>产品眼中</th>
	<th>听我忽悠的</th>
	<th>天才</th>
	<th>听我忽悠的</th>
	<th>理解力极其差的傻逼</th>
	<th>帮我推广的</th>
	<th>背锅专业户</th>
	</tr>

	<tr>
	<th>程序员眼中</th>
	<th>傻逼</th>
	<th>大傻逼</th>
	<th>天降大任于斯人也</th>
	<th>战五渣</th>
	<th>菜逼</th>
	<th>背锅专业户</th>
	</tr>

	<tr>
	<th>设计眼中</th>
	<th>根本不懂艺术</th>
	<th>大傻逼死对头</th>
	<th>没有眼光</th>
	<th>美学大师</th>
	<th>傻逼</th>
	<th>背锅专业户</th>
	</tr>

	<tr>
	<th>运营眼中</th>
	<th>听我忽悠的</th>
	<th>听我忽悠的</th>
	<th>听我忽悠的</th>
	<th>听我忽悠的</th>
	<th>运筹帷幄</th>
	<th>背锅专业户</th>
	</tr>
	<tr>
	<th>运营眼中</th>
	<th>傻逼</th>
	<th>傻逼</th>
	<th>傻逼</th>
	<th>傻逼</th>
	<th>傻逼</th>
	<th>背锅专业户</th>
	</tr>


</table>