怎么样把table表格使用css样式居中显示

html-css0138

怎么样把table表格使用css样式居中显示,第1张

1、普通居中。

align="center"

<table align="center">

  <tr>

   <td>商品名称</td>

   <td>商品价格</td>

   <td>商品描述</td>

   <td>购买</td>

  </tr>

 </table>

2、css样式居中。

margin:0 auto

<style type="text/css">

 table1{

  margin:0 auto/* 自动居中，不论王爷的大小 */

  border:1/* 边框粗度 */

  width:80%/* 宽度只占当前页面的80% */

 }

</style>

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：body {text-align: center} table {margin: auto}。

3、浏览器运行index.html页面，此时成功用css让表格居中了。

做法如下：    1.为表格(<table>标签)设置一个具体的宽度

2.添加一个属性 margin: 0 auto

具体代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge"/>

    <title>Hello, HTML5</title>

    <style>

        /*  在此处填写叠层样式  */

        body, html{

            height: 100%

            width: 100%

            margin: 0 padding: 0

        }

        table {

            height: 80%

            width: 80%         /*  必须设置一个宽度， margin: 0 auto才能使之居于父组件中央*/

            margin: 10px auto  /*  通过设置外边距（margin）中的左右外边距属性为auto使之居于父组件（body）中间*/

        }

            table tr{

                height: 40px

                width: 100%

                background-color: red

            }

            table>tr>td{

                height: 100% width: 33.3%

                background-color: red

            }

    </style>

    <script>

        /*  在此处填写JavaScript代码   */

    </script>

</head>

<body>

<table>

    <tr>

        <td>12</td>

        <td>12</td>

        <td>12</td>

    </tr>

    <tr>

        <td></td>

        <td></td>

        <td></td>

    </tr>

    <tr>

        <td></td>

        <td></td>

        <td></td>

    </tr>

</table>

    <!-- 在此处编写HTML页面  -->

</body>

</html>