0

I am making a webpage which will involve having 9 tables in a 3x3 formation on screen.

So far I have the 9 tables on top of each other, but I would like them set up kind of like a tic tac toe board in the centre of the screen, and I am going to fill them all differently. Any suggestion? I have given them all the same ID, and individual classes if that helps..

PS please don't suggest that I just make different cells - it is important that they are different tables!

html:

<table id='table' class="table1">
    <tr>
    </tr>
</table>
<table id='table' class="table2">
    <tr>
    </tr>
</table>
<table id='table' class="table3">
    <tr>
    </tr>
</table>
<table id='table' class="table4">
    <tr>
    </tr>
</table>
<table id='table' class="table5">
    <tr>
    </tr>
</table>
<table id='table' class="table6">
    <tr>
    </tr>
</table>
<table id='table' class="table7">
    <tr>
    </tr>
</table>
<table id='table' class="table8">
    <tr>
    </tr>
</table>
<table id='table' class="table9">
    <tr>
    </tr>
</table>

css:

#table { 
    padding: 0px; 
    margin: 0 auto;
    outline-color: red;
    outline-style: solid;
    width: 80px;
    height: 80px;
}
jordanc
  • 65
  • 5
  • 1
    Stop using same ID and also use double quotes for consistency of code format. – hdotluna Feb 27 '17 at 03:27
  • You can't have duplicate ids, switch to a class instead – A. L Feb 27 '17 at 03:28
  • Can you explain _why_ they need to be tables and not cells in table? Because I'm trying to figure out what you are doing that needs that sort of layout. – Jhecht Feb 27 '17 at 03:29
  • 1
    You got IDs and classes mixed up. IDs should be unique and classes can be repeated. – Matheus Avellar Feb 27 '17 at 03:30
  • thanks for the tip - switched to classes and fixed double quotes :) did this intermittently and forgot to check style.. – jordanc Feb 27 '17 at 03:50
  • You are only going to put tabular data in those tables, aren't you? Tables aren't for layout http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html. – Jon P Feb 27 '17 at 04:03
  • yes! data is going in the tables – jordanc Feb 27 '17 at 04:11

3 Answers3

0

Here was the first way that came to mind using width and float attributes. Pretty sure you could also do something in flexbox to make it so that the tables stayed the same height but my biggest recommendation is that you really shouldn't need to do this, but without knowing more about this I can't particularly give you more reasons.

table.table {
  width: 33%;
  float: left;
  min-height: 100px;
  min-width: 100px;
  border: 1px solid orange;
}
<table class='table' id="table1">
  <tr>
  </tr>
</table>
<table class='table' id="table2">
  <tr>
  </tr>
</table>
<table class='table' id="table3">
  <tr>
  </tr>
</table>
<table class='table' id="table4">
  <tr>
  </tr>
</table>
<table class='table' id="table5">
  <tr>
  </tr>
</table>
<table class='table' id="table6">
  <tr>
  </tr>
</table>
<table class='table' id="table7">
  <tr>
  </tr>
</table>
<table class='table' id="table8">
  <tr>
  </tr>
</table>
<table class='table' id="table9">
  <tr>
  </tr>
</table>
Jhecht
  • 4,407
  • 1
  • 26
  • 44
0

Wrap them in a div and have them like the following:

.table {
  font-size: 14px;
  display: inline-table;
  padding: 0px;
  margin: 0 auto;
  outline-color: red;
  outline-style: solid;
  width: 80px;
  height: 80px;
}
div {
  width: 248px;
  font-size: 0;
}
<div>
  <table class="table"><tr></tr></table>
  <table class="table"><tr></tr></table>
  <table class="table"><tr></tr></table>
  <table class="table"><tr></tr></table>
  <table class="table"><tr></tr></table>
  <table class="table"><tr></tr></table>
  <table class="table"><tr></tr></table>
  <table class="table"><tr></tr></table>
  <table class="table"><tr></tr></table>
</div>

https://jsfiddle.net/q1vcwppa/

Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
Amir H. Bagheri
  • 1,416
  • 1
  • 9
  • 17
0

OR TRY THIS !

 <div>
<table id='table' class="table1">
<tr>
</tr>
</table>
<table id='table' class="table2">
<tr>
</tr>
</table>
<table id='table' class="table3">
<tr>
</tr>
</table>
<table id='table' class="table4">
<tr>
</tr>
</table>
<table id='table' class="table5">
<tr>
</tr>
</table>
<table id='table' class="table6">
<tr>
</tr>
</table>
<table id='table' class="table7">
<tr>
</tr>
</table>
<table id='table' class="table8">
<tr>
</tr>
</table>
<table id='table' class="table9">
<tr>
</tr>
</table>
</div>



div{
width:250px;
margin: 0 auto;
}
#table { 
padding: 0px; 
margin: 0 auto;
outline-color: red;
outline-style: solid;
width: 80px;
height: 80px;
display:inline-block;
}
.table1{
background-color:blue;
}
 .table2{
background-color:green;
}
.table3{
background-color:orange;
ManishP33
  • 11
  • 1