Michael Korec
Reputation: 11
Need help centering a table in HTML
I'm working on a python web app checkers right now so I'm building my templates for it. However, I'm unable to center the main checkerboard onto screen without breaking the aspect ratio of it.
Here's what it looks like right now:
Here's what I want it to look like:
Can you suggest some changes I should make to my code?
ol {
margin: 0;
padding: 0
}
table td,
table th {
padding: 0
}
.c0 {
border-right-style: solid;
border-bottom-color: #000000;
border-top-width: 1pt;
border-right-width: 1pt;
border-left-color: #000000;
vertical-align: middle;
border-right-color: #000000;
border-left-width: 1pt;
border-top-style: solid;
background-color: #000000;
border-left-style: solid;
border-bottom-width: 1pt;
width: 56.7pt;
border-top-color: #000000;
border-bottom-style: solid
}
.c2 {
border-right-style: solid;
border-bottom-color: #000000;
border-top-width: 1pt;
border-right-width: 1pt;
border-left-color: #000000;
vertical-align: middle;
border-right-color: #000000;
border-left-width: 1pt;
border-top-style: solid;
border-left-style: solid;
border-bottom-width: 1pt;
width: 56.7pt;
border-top-color: #000000;
border-bottom-style: solid
}
.c7 {
color: #000000;
font-weight: 400;
text-decoration: none;
vertical-align: baseline;
font-size: 11pt;
font-family: "Arial";
font-style: normal
}
.c6 {
padding-top: 0pt;
padding-bottom: 0pt;
line-height: 1.15;
orphans: 2;
widows: 2;
text-align: left;
height: 11pt
}
.c1 {
color: #ffffff;
font-weight: 400;
text-decoration: none;
vertical-align: baseline;
font-size: 50pt;
font-family: "Arial";
font-style: normal
}
.c12 {
padding-top: 0pt;
padding-bottom: 0pt;
line-height: 1.15;
text-align: center;
height: 11pt
}
.c3 {
padding-top: 0pt;
padding-bottom: 0pt;
line-height: 1.0;
text-align: center;
height: 11pt
}
.c4 {
padding-top: 0pt;
padding-bottom: 0pt;
line-height: 1.0;
text-align: center
}
.c10 {
margin-left: auto;
border-spacing: 0;
border-collapse: collapse;
margin-right: auto
}
.c8 {
background-color: #ffffff;
max-width: 451.4pt;
padding: 72pt 72pt 72pt 72pt
}
.c11 {
orphans: 2;
widows: 2
}
.c9 {
margin-right: 5.1pt
}
.c5 {
height: 56.7pt
}
.title {
padding-top: 0pt;
color: #000000;
font-size: 26pt;
padding-bottom: 3pt;
font-family: "Arial";
line-height: 1.15;
page-break-after: avoid;
orphans: 2;
widows: 2;
text-align: left
}
.subtitle {
padding-top: 0pt;
color: #666666;
font-size: 15pt;
padding-bottom: 16pt;
font-family: "Arial";
line-height: 1.15;
page-break-after: avoid;
orphans: 2;
widows: 2;
text-align: left
}
li {
color: #000000;
font-size: 11pt;
font-family: "Arial"
}
p {
margin: 0;
color: #000000;
font-size: 11pt;
font-family: "Arial"
}
h1 {
padding-top: 20pt;
color: #000000;
font-size: 20pt;
padding-bottom: 6pt;
font-family: "Arial";
line-height: 1.15;
page-break-after: avoid;
orphans: 2;
widows: 2;
text-align: left
}
h2 {
padding-top: 18pt;
color: #000000;
font-size: 16pt;
padding-bottom: 6pt;
font-family: "Arial";
line-height: 1.15;
page-break-after: avoid;
orphans: 2;
widows: 2;
text-align: left
}
h3 {
padding-top: 16pt;
color: #434343;
font-size: 14pt;
padding-bottom: 4pt;
font-family: "Arial";
line-height: 1.15;
page-break-after: avoid;
orphans: 2;
widows: 2;
text-align: left
}
h4 {
padding-top: 14pt;
color: #666666;
font-size: 12pt;
padding-bottom: 4pt;
font-family: "Arial";
line-height: 1.15;
page-break-after: avoid;
orphans: 2;
widows: 2;
text-align: left
}
h5 {
padding-top: 12pt;
color: #666666;
font-size: 11pt;
padding-bottom: 4pt;
font-family: "Arial";
line-height: 1.15;
page-break-after: avoid;
orphans: 2;
widows: 2;
text-align: left
}
h6 {
padding-top: 12pt;
color: #666666;
font-size: 11pt;
padding-bottom: 4pt;
font-family: "Arial";
line-height: 1.15;
page-break-after: avoid;
font-style: italic;
orphans: 2;
widows: 2;
text-align: left
}<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
</head>
<body class="c8">
<p class="c6"><span class="c7"></span></p>
<a id="t.e9fce3736f9827f2937bda8f2c218a755be7fe1b"></a>
<a id="t.0"></a>
<table class="c10">
<tbody>
<tr class="c5">
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">a</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">b</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">c</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">d</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3 c9"><span class="c1"></span></p>
</td>
</tr>
<tr class="c5">
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">e</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">f</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4 c11"><span class="c1">g</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">h</span></p>
</td>
</tr>
<tr class="c5">
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">i</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">j</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">k</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">l</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
</tr>
<tr class="c5">
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
</tr>
<tr class="c5">
<td class="c0" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
</tr>
<tr class="c5">
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">a</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">b</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">c</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">d</span></p>
</td>
</tr>
<tr class="c5">
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">e</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">f</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">g</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">h</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
</tr>
<tr class="c5">
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">i</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">j</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">k</span></p>
</td>
<td class="c2" colspan="1" rowspan="1">
<p class="c3"><span class="c1"></span></p>
</td>
<td class="c0" colspan="1" rowspan="1">
<p class="c4"><span class="c1">l</span></p>
</td>
</tr>
</tbody>
</table>
<p class="c11 c12"><span class="c7"></span></p>
</body>
</html>Upvotes: 0
Views: 157
Answers (1)
tacoshy
Reputation: 13001
First, you shouldnt use a table for this as this is not tabular data. You want to use a CSS-Grid as it creates a table like layout with far less hard-coding HTML-wise then a table.
Wrap the table inside a flexbox and use justify-content: center to align it in the horizontal center. Then use align-items: center; to align the board in the vertical center.
The grid itself should have a column width equal the row height. That way they maintain to be squares and not depend on the line height.
/* centers the board horizontally and vertically in the screen */
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* creates a grid (table like layout) */
.board {
display: grid;
border: 3px solid black;
width: min-content;
}
/* sets the height and width in landscape mode to fit the screen responsivly */
@media only screen
and (orientation: landscape) {
.board {
grid-template-columns: repeat(8, 10vh);
grid-auto-rows: 10vh;
}
}
/* sets the height and width in portrait mode to fit the screen responsivly */
@media only screen
and (orientation: portrait) {
.board {
grid-template-columns: repeat(8, 10vw);
grid-auto-rows: 10vw;
}
}
/* centers the element within a grid-card (cell) */
.board > div {
display: flex;
justify-content: center;
align-items: center;
}
/* coloring the cells to look like a chessboard */
.board :nth-child(-n+8):nth-child(odd),
.board :nth-child(n+9):nth-child(-n+16):nth-child(even),
.board :nth-child(n+17):nth-child(-n+24):nth-child(odd),
.board :nth-child(n+25):nth-child(-n+32):nth-child(even),
.board :nth-child(n+33):nth-child(-n+40):nth-child(odd),
.board :nth-child(n+41):nth-child(-n+48):nth-child(even),
.board :nth-child(n+49):nth-child(-n+56):nth-child(odd),
.board :nth-child(n+57):nth-child(-n+64):nth-child(even){
background-color: black;
color: white;
}<div class="board">
<!-- 1st row -->
<div class="A1">a</div>
<div class="B1"></div>
<div class="C1">b</div>
<div class="D1"></div>
<div class="E1">c</div>
<div class="F1"></div>
<div class="G1">d</div>
<div class="H1"></div>
<!-- 2nd row -->
<div class="A2"></div>
<div class="B2">e</div>
<div class="C2"></div>
<div class="D2">f</div>
<div class="E2"></div>
<div class="F2">g</div>
<div class="G2"></div>
<div class="H2">h</div>
<!-- 3rd row -->
<div class="A3">i</div>
<div class="B3"></div>
<div class="C3">j</div>
<div class="D3"></div>
<div class="E3">k</div>
<div class="F3"></div>
<div class="G3">l</div>
<div class="H3"></div>
<!-- 4th row -->
<div class="A4"></div>
<div class="B4"></div>
<div class="C4"></div>
<div class="D4"></div>
<div class="E4"></div>
<div class="F4"></div>
<div class="G4"></div>
<div class="H4"></div>
<!-- 5th row -->
<div class="A5"></div>
<div class="B5"></div>
<div class="C5"></div>
<div class="D5"></div>
<div class="E5"></div>
<div class="F5"></div>
<div class="G5"></div>
<div class="H5"></div>
<!-- 6th row -->
<div class="A6"></div>
<div class="B6">a</div>
<div class="C6"></div>
<div class="D6">b</div>
<div class="E6"></div>
<div class="F6">c</div>
<div class="G6"></div>
<div class="H6">d</div>
<!-- 7th row -->
<div class="A7">e</div>
<div class="B7"></div>
<div class="C7">f</div>
<div class="D7"></div>
<div class="E7">g</div>
<div class="F7"></div>
<div class="G7">h</div>
<div class="H7"></div>
<!-- 8th row -->
<div class="A8"></div>
<div class="B8">i</div>
<div class="C8"></div>
<div class="D8">j</div>
<div class="E8"></div>
<div class="F8">k</div>
<div class="G8"></div>
<div class="H8">l</div>
</div>Upvotes: 2
Related Questions
- How to center the contents of an HTML table?
- How to make my table stay centered in HTML
- HTML & CSS: Can't center my tables
- Table not centering at all
- I can't seem to center this table
- HTML Table Centering
- Table not centering in browser, using HTML and CSS
- Center a table using html and css
- center aligning a table
- Center a table in the page