如何在不使用CSS的情况下实现HTML表格圆角？

由于原生HTML没有内置的表格圆角属性，且你明确要求完全不使用CSS（包括内联style属性），只能通过图片拼接+HTML结构拆分或动态生成SVG容器的方式实现，结合你的PHP站点，具体方案如下：

方法1：拆分表格结构+圆角图片填充 #

提前制作4张匹配边框尺寸的圆角图片（左上、右上、左下、右下），将表格拆分为多部分，用图片填充四个角，中间用普通单元格模拟边框：

示例代码（PHP动态生成） #

<?php
// 替换为你实际的圆角图片路径
$cornerImgs = [
    'top-left' => 'images/table-tl.png',
    'top-right' => 'images/table-tr.png',
    'bottom-left' => 'images/table-bl.png',
    'bottom-right' => 'images/table-br.png',
];
?>

<!-- 外层拼接表格，需消除内边距和间距 -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <!-- 顶部圆角+边框 -->
    <tr>
        <td><img src="<?php echo $cornerImgs['top-left']; ?>" alt="" border="0"></td>
        <td bgcolor="#DFDFDF" height="5"></td> <!-- 高度对应边框厚度 -->
        <td><img src="<?php echo $cornerImgs['top-right']; ?>" alt="" border="0"></td>
    </tr>
    <!-- 中间内容区域+左右边框 -->
    <tr>
        <td bgcolor="#DFDFDF" width="5"></td> <!-- 宽度对应边框厚度 -->
        <td bgcolor="#FFFFFF" style="padding: 10px;">
            <!-- 这里放置你的实际表格内容 -->
            <table border="0" width="100%" cellpadding="10" cellspacing="0">
                <tr>
                    <td>内容单元格1</td>
                    <td>内容单元格2</td>
                </tr>
            </table>
        </td>
        <td bgcolor="#DFDFDF" width="5"></td>
    </tr>
    <!-- 底部圆角+边框 -->
    <tr>
        <td><img src="<?php echo $cornerImgs['bottom-left']; ?>" alt="" border="0"></td>
        <td bgcolor="#DFDFDF" height="5"></td>
        <td><img src="<?php echo $cornerImgs['bottom-right']; ?>" alt="" border="0"></td>
    </tr>
</table>

注意点 #

• 圆角图片需与边框颜色、厚度完全匹配，避免拼接错位
• 外层表格必须设置cellpadding="0"和cellspacing="0"，保证无缝拼接

方法2：PHP动态生成SVG圆角容器 #

无需外部图片，用PHP生成SVG代码作为圆角边框容器，再嵌入表格内容：

示例代码 #

<?php
// 自定义容器参数
$containerWidth = '100%';
$radius = 20;
$borderColor = '#DFDFDF';
$bgColor = '#FFFFFF';
$borderThickness = 5;
$padding = 10;
?>

<svg width="<?php echo $containerWidth; ?>" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
    <!-- 绘制圆角边框背景 -->
    <rect x="0" y="0" width="100%" height="100%" rx="<?php echo $radius; ?>" ry="<?php echo $radius; ?>" 
          fill="<?php echo $bgColor; ?>" stroke="<?php echo $borderColor; ?>" stroke-width="<?php echo $borderThickness; ?>"/>
    <!-- 嵌入表格内容 -->
    <foreignObject x="<?php echo $padding; ?>" y="<?php echo $padding; ?>" 
                   width="calc(100% - <?php echo $padding*2; ?>px)" height="calc(100% - <?php echo $padding*2; ?>px)">
        <body xmlns="http://www.w3.org/1999/xhtml">
            <table border="0" width="100%" cellpadding="10" cellspacing="0">
                <tr>
                    <td>内容单元格1</td>
                    <td>内容单元格2</td>
                </tr>
            </table>
        </body>
    </foreignObject>
</svg>

优势 #

• 无需额外图片文件，SVG参数可通过PHP动态调整，适配不同尺寸和样式
• 避免多表格嵌套的复杂布局，结构更简洁

需要明确：完全不使用CSS的情况下，没有原生HTML标签能直接实现表格圆角，上述两种方法都是通过HTML结构拼接或矢量图形模拟圆角效果，是当前唯一可行的方案。

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