CODEWITHSUNDEEP
htmlcss
Heisenberg
Heisenberg

Reputation: 5279

How to set separate html tables

I have html tables and I would like to add summary columns next to it.
I could create simple table, but I couldn't figure out how to set separate tables next to it.

My desired result is described below. If someone has idea, please let me know.

enter image description here

td {
  border: solid 1px black;
  padding:5px;
}

table {
  border-collapse: collapse;
}
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

Upvotes: 1

Views: 59

Answers (2)

Ranjit Singh
Ranjit Singh

Reputation: 3735

According to your requirement, you actually do not need another table, but in future if you want to use table side by side then you can use below solution.

td {
  border: solid 1px black;
  padding:5px;
}

table {
  border-collapse: collapse;
  float:left;
}
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>
<table style="margin-left:20px">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
 </table>

Upvotes: 1

Shiladitya
Shiladitya

Reputation: 12181

Here you go with a solution

td {
  border: solid 1px black;
  padding:5px;
}
table {
  border-collapse: collapse;
}

.noborder {
  border: none;
  padding: 5px 8px;
}
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td class="noborder"></td>
    <td>2</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td class="noborder"></td>
    <td>2</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td class="noborder"></td>
    <td>2</td>
  </tr>
</table>

Rather than creating another table I will suggest to use the no-border cell.

Hope this will help you

Upvotes: 1

Related Questions