如何为网页中的图片添加红色边框并以表格形式包裹

首先先修正原HTML的结构问题（原代码里<title>和<style>直接放在<html>下不符合规范，应该放到<head>标签内），再完成图片加红框、用表格包裹的需求，具体实现如下：

步骤说明 #

• 补充完整的<head>和<body>标签，把页面标题、样式代码放到<head>里，页面内容（标题、图片）放到<body>里
• 用<table>标签包裹<img>，通过样式给表格或图片设置红色边框
• 提供两种实现方案，按需选择：

方案1：内联样式（快速直观） #

直接给表格和图片添加内联样式，代码如下：

<html>
<head>
    <title> MY FIRST TAB </title>
    <style>
        body {font:12px Verdana,Arial; color: #428bca; background-color:#5bc0de}
    </style>
</head>
<body>
    <h3> MY FIRST WEBPAGE </h3>
    <h1> DESIGNING MY FIRST WEBPAGE </h1>
    <!-- 用表格包裹图片，可单独给表格或图片加红框，这里同时添加做示例 -->
    <table border="2" style="border-color: red;">
        <tr>
            <td>
                <img src="3333.jpg" width="800" height="500" style="border: 2px solid red;">
            </td>
        </tr>
    </table>
</body>
</html>

方案2：CSS类控制（便于后期维护） #

在<style>里定义通用类，给表格和图片添加类名实现样式，代码如下：

<html>
<head>
    <title> MY FIRST TAB </title>
    <style>
        body {font:12px Verdana,Arial; color: #428bca; background-color:#5bc0de}
        /* 表格红边框类 */
        .red-border-table {
            border: 2px solid red;
            border-collapse: collapse; /* 合并表格边框，视觉更整洁 */
        }
        /* 图片红边框类 */
        .red-border-img {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <h3> MY FIRST WEBPAGE </h3>
    <h1> DESIGNING MY FIRST WEBPAGE </h1>
    <table class="red-border-table">
        <tr>
            <td>
                <img src="3333.jpg" width="800" height="500" class="red-border-img">
            </td>
        </tr>
    </table>
</body>
</html>

关键细节提醒 #

• 原代码里的color #428bca缺少冒号，已修正为color: #428bca，否则该样式不会生效
• 可根据需求选择只给表格加红框，或只给图片加红框，无需同时添加
• border-collapse: collapse用于消除表格的双层边框，让样式更美观

内容的提问来源于stack exchange，提问作者Robin Hooda