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

html-css020

怎么样把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>

首先你需要给你的table设置一个绝对宽度

然后给这个table设置CSS,例

table

{

margin:0

auto

}

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

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

具体代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

<!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: 0padding: 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>