Custom Table in html

Question

I need to create a custom table through html. My html skills are not the best. Although I tried many things, I couldn't get what I want.

Here you can see how I want to get the table.

enter image description here

Any idea?

Here is my code:

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
</style>
<table class="tg">
  <tr>
    <th class="tg-031e" colspan="3">Title</th>
  </tr>
  <tr>
    <td class="tg-031e">col 1</td>
    <td class="tg-031e">Col 2</td>
    <td class="tg-031e">Col 3</td>
  </tr>
  <tr>
    <td class="tg-031e">row 1</td>
    <td class="tg-031e">a</td>
    <td class="tg-031e">c</td>
  </tr>
  <tr>
    <td class="tg-031e">row 2</td>
    <td class="tg-031e">b</td>
    <td class="tg-031e"></td>
  </tr>
</table>

possible duplicate of [Two HTML tables side by side, centered on the page](http://stackoverflow.com/questions/346940/two-html-tables-side-by-side-centered-on-the-page) — Kinnectus, Jun 23 '14 at 13:38
Hint: Bootstrap may make your life easier (http://stackoverflow.com/questions/23977404/two-side-by-side-tables-in-bootstrap). — L-Four, Jun 23 '14 at 14:22
Hi, the link you mentioned is not what I ask, I need a space in between — user3122260, Jun 23 '14 at 14:22

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

Solution

#t1 {
  width: 60%;
}
#t2 {
  width: 30%;
}
.tg  {
  border-collapse:collapse;
  border-spacing:0;   
  float: left;
  margin: 10px;
}
.tg td{
  font-family:Arial, sans-serif;
  font-size:14px;
  padding:10px 5px;
  border-style:solid;
  border-width:1px;
  overflow:hidden;
  word-break:normal;
}
.tg th{
  font-family:Arial, sans-serif;
  font-size:14px;
  font-weight:normal;
  padding:10px 5px;
  border-style:solid;
  border-width:1px;
  overflow:hidden;
  word-break:normal;
}

Custom Table in html

1 Answers1

Solution