新的外部css；并排展示的表格

我是初级CSS，但一个朋友用HTML4或HTML5开始了CSS？所以我有一个陡峭的学习曲线。我有点迷路了

我有用HTML编写的个人网站，我正在转换成CSS。e、 我不要求完美，只要简单易行就行了

我有数百页的单行，两个单元格表格。。。每页有4到6张这样的表格。左边拿着剪报；右边是转录的文本。图像的长度和宽度各不相同；这些图片是按姓氏组织的（所以我不能按图片大小对它们进行分组）。在单个HTML表之间，我有一个居中的星号*来分隔表。它很简单，看起来干净有序

我正在寻找一个非常基本且易于理解的表格写入，以添加到CSS文件中，使左侧（图像）单元格保持一个设置的

宽度

，因此表格的每一条垂直线“对齐”，而不管图像大小或图像是否填充单元格

这里什么最好？我在同一页面上重复使用的

.table

，因此它与我现在在HTML中使用的类似

或者使用一个新的

#tablename

并在*符号的每一个表行上使用

colspan

如果我取了一个我已经有的

#tablenumber

，我是否要更改名称，比如使用

#news

，然后列出

td

/

tr

等的详细信息？有人能举个例子吗

---

有人能举例说明如何为CSS文件编写一个

.table

，告诉我如何设置它吗？

使用html表格来保持内容的布局早已过时，出于几个合理的原因，它被认为是一种糟糕的设计方法

我建议您熟悉CSS的基本知识，并尝试用CSS从头开始设计。这就是为什么，手动将表格布局转换为CSS不仅不会那么痛苦，而且还会为您的网站添加一些未来的校对和更好的设备支持，特别是如果您计划采用responsice设计方式的话

如果你还没有准备好学习CSS的完整课程，我强烈建议你尝试一下

（我个人最喜欢的）

它们是一种非常简单的方法，可以在不具备丰富CSS/Js知识的情况下快速原型化网站，并结合了web设计领域的最佳编程实践，因此您无需太多麻烦；）

---

此外，如果你在提问的同时发布一个链接/截图，也会很有帮助。否则，我们很难弄清楚您到底在寻找什么。

虽然我完全同意Shubham的观点，即表格不应用于布局，但有时您可能不得不维护一个旧网站，而您不会完全重写它，或者，你不得不制作一份时事通讯，在那里表格似乎仍然工作得最好

因为您没有包含样本，所以我假设它看起来像这样：

<table>
  <tr>
    <td>
      <img src="https://via.placeholder.com/150" />
    </td>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis magna arcu, maximus a odio sit amet, semper viverra augue. Donec velit felis, tempor eu aliquet vestibulum, pulvinar ac metus. Sed eu neque eu tortor placerat vulputate. Mauris tristique ipsum ac suscipit ultricies. Nullam dapibus pellentesque neque. Cras vulputate fringilla lorem, sit amet bibendum ipsum. Phasellus dignissim, leo ac imperdiet sagittis, dui justo sollicitudin risus, a pellentesque risus quam vel purus. Pellentesque nisl odio, lobortis ut felis sed, commodo molestie eros. Donec malesuada, libero in pharetra facilisis, massa massa sagittis justo, id luctus leo nibh at enim.
    </td>
  </tr>
</table>
<center>*</center>
<table>
  <tr>
    <td>
      <img src="https://via.placeholder.com/200x300" />
    </td>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis magna arcu, maximus a odio sit amet, semper viverra augue. Donec velit felis, tempor eu aliquet vestibulum, pulvinar ac metus. Sed eu neque eu tortor placerat vulputate. Mauris tristique ipsum ac suscipit ultricies. Nullam dapibus pellentesque neque. Cras vulputate fringilla lorem, sit amet bibendum ipsum. Phasellus dignissim, leo ac imperdiet sagittis, dui justo sollicitudin risus, a pellentesque risus quam vel purus. Pellentesque nisl odio, lobortis ut felis sed, commodo molestie eros. Donec malesuada, libero in pharetra facilisis, massa massa sagittis justo, id luctus leo nibh at enim.
    </td>
  </tr>
</table>
<center>*</center>
<table>
  <tr>
    <td>
      <img src="https://via.placeholder.com/75x400" />
    </td>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis magna arcu, maximus a odio sit amet, semper viverra augue. Donec velit felis, tempor eu aliquet vestibulum, pulvinar ac metus. Sed eu neque eu tortor placerat vulputate. Mauris tristique ipsum ac suscipit ultricies. Nullam dapibus pellentesque neque. Cras vulputate fringilla lorem, sit amet bibendum ipsum. Phasellus dignissim, leo ac imperdiet sagittis, dui justo sollicitudin risus, a pellentesque risus quam vel purus. Pellentesque nisl odio, lobortis ut felis sed, commodo molestie eros. Donec malesuada, libero in pharetra facilisis, massa massa sagittis justo, id luctus leo nibh at enim.
    </td>
  </tr>
</table>

只需将

class=“news clipping”

添加到需要对齐的表中即可

<table class="news-clipping">
  <tr>
    <td>
      <img src="https://via.placeholder.com/150" />
    </td>
    <td>
      Lorem ipsum...
    </td>
  </tr>
</table>
<center>*</center>
<table class="news-clipping">
  <tr>
    <td>
      <img src="https://via.placeholder.com/200x300" />
    </td>
    <td>
      Lorem ipsum...
    </td>
  </tr>
</table>

乱数假文。。。
*
乱数假文。。。

---

示例在

感谢您的评论，但我仍然希望获得如何在外部CSS中为table编写项目的示例，包括.table和#table。每个社区都有参与者应该遵循的规则。选项卡表格清楚地说明“请勿使用”。没有通用的“表”，因为它可能意味着数据库表、word或PDF格式的表、数据结构等。这一问题正在得到解决。您的贡献归Stack Exchange所有，不是您个人的贡献，将被社区编辑或删除。您的帖子未被编辑，因为它是初学者，您不应编辑帖子的要求不在Stack Exchange的指导原则范围内-但是欢迎您的贡献，您的参与也很有帮助；谢谢

<table class="news-clipping">
  <tr>
    <td>
      <img src="https://via.placeholder.com/150" />
    </td>
    <td>
      Lorem ipsum...
    </td>
  </tr>
</table>
<center>*</center>
<table class="news-clipping">
  <tr>
    <td>
      <img src="https://via.placeholder.com/200x300" />
    </td>
    <td>
      Lorem ipsum...
    </td>
  </tr>
</table>