How to Reduce Space Between Two Columns in HTML Table ?
Last Updated :
30 Jan, 2024
In HTML, we can create tables with multiple columns to display data in an organized manner. Sometimes, we may want to reduce the space between two adjacent columns in a table. We can achieve this by applying CSS properties to the table elements. In this article, we will see the different approaches to reducing the space between two columns in an HTML table.
Using cellpadding attribute:Â
The cell padding attribute specifies the space between the content of a cell and its border. By setting a lower value for this attribute, we can reduce the space between two adjacent columns. However, this approach may not be very effective in some cases as it affects the padding of all cells in the table.
Syntax:
<table cellpadding="value">
<!-- table content -->
</table>
Example 1: This example uses the Cellpadding attribute to reduce space between two columns in html table.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using cellpadding attribute</title>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<table cellpadding="5">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
</html>
|
Output:
Using cellspacing attribute:
The cellspacing attribute specifies the space between two adjacent cells in a table. By setting a lower value for this attribute, we can reduce the space between two adjacent columns. However, this approach may not be very effective in some cases as it affects the spacing of all cells in the table.
Syntax:
<table cellspacing="value">
<!-- table content -->
</table>
Example 2: This example uses the Cellspacing attribute to reduce space between two columns in html table.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using cellspacing attribute</title>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<table border="1" cellspacing="10">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>
|
Output:
Using CSS properties:
We can use CSS properties to set the padding and spacing for individual cells or columns in a table. By setting a lower value for the padding or spacing property, we can reduce the space between two adjacent columns.
Syntax:
<style>
table {
/* CSS properties for the table */
}
td {
/* CSS properties for the table cells */
}
</style>
<table>
<!-- table content -->
</table>
Example 3: This example uses the CSS properties to reduce space between two columns in html table.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using CSS properties</title>
<style>
table {
border-spacing: 0;
}
td {
padding: 5px;
}
td:first-child {
padding-right: 10px;
}
td:last-child {
padding-left: 10px;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...