整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
table{
table-layout:fixed;//布局方式要固定
width:65%;
border-collapse:collapse;
}
td{
white-space:nowrap;//不允许文本换行
overflow:hidden; //超部分自动隐藏
text-overflow:ellipsis; //超出部分以省略号显示
border:black solid 1px;
}
li{
display:block;
float:left;
width:33.3%;
white-space:nowrap;
overflow:hidden;
/*如果要交超出内容以...显示，则需要增加属性定义：*/
text-overflow:ellipsis;
}
表格和列表的最终效果如下：
-End-
篇文章介绍了div标签的作用，我们这篇文章主要来看下过气表格标签table的语法与使用。
在div没有出现之前，table曾是做网页的中坚力量。记得在开始学网页的时候，div是神马，我不造呀！做网页还用div吗，就只用table就可以了，各种表格嵌套加嵌套，一个网页就拼凑出来了。但table写的布局页面做维护就比较令人头痛欲裂了。因为table是一层一层嵌套，标签量冗余过多。所以修改起来就是动一发而牵全身。维护起来格外麻烦，往往是拆东墙补西墙。所以它后来就慢慢被div所替代。但是在数据列表上还是用table形式来写比较的合理，所以现在table多用于网站后台的表格数据处理中。
简单的表格由table元素以及一个或多个tr（行标签）、th（表头单元格标签）、td（普通单元格标签）等标签所组成，当然复杂的表格还包括caption（表格标题）、col(定义列)、colgroup(对表格中的列进行组合)、thead（组合表头的内容）tbody(组合表格的主题内容)、tfoot(组合表格的脚注内容)等这里我们先简单了解下即可。
定义表格：<table></table>
创建表行：<tr></tr>
创建列(单元格):<th></th>（表头）、<td></td>（表格单元）
注意：默认情况下，每行中的列数是统一的。
比如我们想创建一个姓名、年龄、分数和日期的数据表格，并设置border为1，我们可以使用table来制作。具体的表格代码如下图所示：
在网页中呈现的效果就如下图所示：
这时候有的人就会说了，为什么这个表格看起来这么奇怪，边框都是有空隙的呢？我们只需要给表格添加一些特殊的样式，即可制作一个比较漂亮好看的表格了。添加的样式代码：
在网页中呈现的效果就如下图所示：
现在我们的表格是不是看着比较的清新了，上面的css代码中为表格添加了背景、边框以及去掉了粗的边线。具体的css代码我们会在以后的课程中为大家介绍，大家在这里只需要知道并了解table标签的作用以及使用就可以了。没事可以多用table写一写表格，熟能生巧。
附赠一句经典语录：每天早上，你有两个简单的选择：是睡回笼觉，还是起身追逐 梦想 。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。
挑战30天在头条写日记#
HTML是一种用于创建网页结构和内容的标记语言，其中包含了许多标签，可以用于排版、布局和展示内容。本文将详细介绍HTML中的<tr>和<td>标签的使用方法，并通过示例展示如何创建表格。
1. <tr>标签的作用： <tr>标签代表HTML表格中的一行（行数据），它可以包含一个或多个<td>元素作为单元格。
2. <td>标签的作用： <td>标签用于定义表格中的一个单元格（列数据），可以包含文本、图像、链接等内容。
3. 如何使用<tr>和<td>： 在使用<tr>和<td>标签时，首先需要创建一个<table>元素作为表格的容器，然后在其中嵌套<tr>和<td>标签，如下所示：
htmlCopy code<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
4. 表格样式： 可以使用CSS来为表格添加样式，如设置边框、背景颜色等。以下是一个简单的示例：
htmlCopy code<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
5. 示例应用： 以下示例演示了如何使用<tr>和<td>标签创建一个包含姓名、年龄和城市的简单表格：
htmlCopy code<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>城市</td>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>广州</td>
</tr>
</table>
</body>
</html>
6. 书籍参考：
7. 总结： 通过本文的介绍，我们了解了HTML中<tr>和<td>标签的基本用法，以及如何创建简单的表格和添加样式。使用这些标签，我们可以轻松地创建具有结构和内容的网页表格，提升页面的可读性和可视性。
*请认真填写需求信息，我们会在24小时内与您取得联系。
