css中td元素宽度怎么设置?

本篇内容主要讲解“css中td元素宽度怎么设置”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css中td元素宽度怎么设置”吧!

1.首先创建一个html文件。

2.在html文件中添加html代码架构。

<!DOCTYPE html>
<html>
    <head>
<meta charset="UTF-8">
        <title>td元素</title>
    </head>
    <body>
    </body>
</html>

3.然后在html代码架构中的body标签里面使用table、tr、td标签创建三行两列表格。

<table>
    <tr><td>内容1</td><td>内容2</td></tr>
    <tr><td>内容3</td><td>内容4</td></tr>
    <tr><td>内容5</td><td>内容6</td></tr>
  </table>

4.在html架构中的html标签里面添加style标签并写入css样式代码来设置td元素宽度。

<style> 
td{
  width: 110px;
  padding: 10px;
  border:1px solid black;
}
tr{
  display:block; 
  margin: 5px O;
}
</style>

5.最后可通过浏览器方式阅读html文件查看设计效果。

完整示例代码如下:

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
  <title>td元素</title>
<style type="text/css">
td{
  width: 110px;
  padding: 10px;
  border:1px solid black;
}
tr{
  display:block; 
  margin: 5px O;
}
</style>
</head>
<body>
  <table>
    <tr><td>内容1</td><td>内容2</td></tr>
    <tr><td>内容3</td><td>内容4</td></tr>
    <tr><td>内容5</td><td>内容6</td></tr>
  </table>
</body>
</html>

到此,相信大家对“css中td元素宽度怎么设置”有了更深的了解,不妨来实际操作一番吧!这里是***网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!