日常在做html表格时会使用到table表格,比如有成绩表、值日表、学员信息表等,会有排版需求让文字居中,合并单元格
目录
1table边框样式实线虚线
2table边框颜色样式
3html表格代码
table边框样式实线虚线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通高科技</title>
<style>
table{
width: 500px;
border: 1px solid red;
}
th,tr,td{
border: 1px dashed red;
}
td{
text-align :center;
}
</style>
</head>
<body>
<table >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="3">table边框样式实线虚线</td>
</tr>
</table>
</body>
</html>
table边框颜色样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通高科技</title>
<style>
table{
width: 500px;
border-color: aqua;
}
td{
text-align :center;
}
</style>
</head>
<body>
<table border="1" >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="3">table边框颜色</td>
</tr>
</table>
</body>
</html>
html表格代码
1、首先新建一个html,点击中间,先填入表格内容;
2、style样式控制,设置高度颜色等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通高科技</title>
<style>
table{
width: 500px;
border-collapse : collapse;
}
td{
text-align :center;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="3">456</td>
</tr>
</table>
</body>
</html>