HTML-table 里的所有文字全局居中+表格怎么布局+跨行操作

最新推荐文章于 2024-06-18 19:41:46 发布

星光君

最新推荐文章于 2024-06-18 19:41:46 发布

阅读量2w

点赞数 14

文章标签： HTML CSS table colspan rowspan

本文链接：https://blog.csdn.net/qq_36940740/article/details/79827696

版权

本例来自一个小作业，如图所示

重点透析:

1.怎么布局，很多新人会犯一个错误就是把tr td来回嵌套使用，这是会报错的，一个td 外面只允许有一个tr

2.看到这个表格，你可以想象为8行6列。

3.跨行操作：colspan=“几行”rowspan="几列"。

4.要保持表格中的每个文字都居中，显然对每个td用align="center"是很费劲的。可以用·css里的<style></style>标签，直接对table进行text-align="center"进行修改。

废话不多说，代码丢出来大家自己体会吧。

 <style>
        table{
        text-align: center;
        }
        /*td{*/
            /*text-align: center;*/
        /*}*/
    </style>
</head>
<body>
<table border="1" width="50%" weight="50%">
    <tr>  <th rowspan="5">上午</th>  <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th></tr>
    <tr>  <td>语文</td> <td>英语</td> <td>物理</td> <td colspan="2">英语</td></tr>
    <tr>  <td>语文</td> <td>英语</td> <td>物理</td> <td>英语</td> <td>数学</td></tr>
    <tr>  <td>英语</td> <td colspan="2">数学</td> <td>数学</td> <td rowspan="2">地理</td></tr>
    <tr>  <td>英语</td> <td>数学</td> <td>数学</td> <td>数学</td> </tr>
    <tr>  <th rowspan="3">下午</th> <td>数学</td> <td>生物</td> <td>化学</td> <td>物理</td> <td>历史</td></tr>
    <tr>  <td>数学</td> <td>地理</td> <td colspan="2">物理</td> <td>化学</td></tr>
    <tr>  <td>体育</td> <td colspan="2">化学</td><td colspan="2">体育</td>
</table>