Hi All,
I am using the `below logic for creating Table in mail body .
table in mail body.
As you can see the table headers are centered and Values are left align how to make everything Centered. ?
table in mail body.
As you can see the table headers are centered and Values are left align how to make everything Centered. ?
You need to use the in line CSS to HTML Code which solves the issue
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<p style="color: blue; font-size: 20px;">This is a paragraph with inline styles.</p>
</body>
</html>
This is a paragraph with inline styles.
You can use the alignment on this
While it’s generally not recommended for larger projects due to maintainability concerns, you can achieve inline table centering using inline CSS within your HTML. Here’s an example:
`HTML<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Table (Inline CSS)</title>
</head>
<body>
<h1>Centered Table</h1>
<table style="margin: 0 auto; border: 1px solid black; border-collapse: collapse;">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Longer data for demonstration</td>
<td>Another cell with content</td>
</tr>
</tbody>
</table>
</body>
</html>`
Center Aligned Table
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: center;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
| Site number | Site contact email address | Status |
|---|---|---|
| 1 | example1@example.com | Active |
| 2 | example2@example.com | Inactive |
| 3 | example3@example.com | Pending |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Aligned Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: center;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Site number</th>
<th>Site contact email address</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>example1@example.com</td>
<td>Active</td>
</tr>
<tr>
<td>2</td>
<td>example2@example.com</td>
<td>Inactive</td>
</tr>
<tr>
<td>3</td>
<td>example3@example.com</td>
<td>Pending</td>
</tr>
</tbody>
</table>
</body>
</html>
