<!DOCTYPE html>
<html lang="hu">
<head>
<meta cahrset="UTF-8"/>
<title>Sakktábla</title>
<style>
.sakktabla { border-spacing: 0; border-collapse: collapse; margin: 20px; }
.sakktabla th { padding: .5em; text-align: center; }
.sakktabla td { border: 1px solid; width: 2em; height: 2em; text-align: center; }
.sakktabla .vilagos
{
display: table-cell;
background: #ede4df;
width: 60px;
height: 60px;
font-size: 30px;
max-width: 60px;
max-height: 60px;
text-align: center;
vertical-align:middle;
-webkit-text-stroke: 1px #180f0a;
}
.sakktabla .sotet
{
display: table-cell;
background: #180f0a;
width: 60px;
height: 60px;
font-size: 30px;
max-width: 60px;
max-height: 60px;
text-align: center;
vertical-align:middle;
-webkit-text-stroke: 1px #ede4df;
}
.sakktabla .barna1
{
background: #41210a;
width: 54px;
height: 54px;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
color: #f2e6d8;
border-left: 8px solid #ae845e;
border-top: 8px solid #ae845e;
}
.sakktabla .barna2
{
background: #41210a;
width: 54px;
height: 54px;
max-height: 60px;
max-width: 60px;
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
color: #f2e6d8;
border-bottom: 8px solid #ae845e;
border-top: 8px solid #ae845e;
transform: rotate(180deg)
}
.sakktabla .barna3
{
background: #41210a;
width: 54px;
height: 54px;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
color: #f2e6d8;
border-right: 8px solid #ae845e;
border-top: 8px solid #ae845e;
}
.sakktabla .barna4
{
background: #41210a;
width: 54px;
height: 54px;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
color: #f2e6d8;
border-left: 8px solid #ae845e;
border-right: 8px solid #ae845e;
}
.sakktabla .barna5
{
background: #41210a;
width: 54px;
height: 54px;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
color: #f2e6d8;
border-left: 8px solid #ae845e;
border-bottom: 8px solid #ae845e;
}
.sakktabla .barna6
{
background: #41210a;
width: 54px;
height: 54px;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
color: #f2e6d8;
border-right: 8px solid #ae845e;
border-bottom: 8px solid #ae845e;
}
</style>
</head>
<body>
<table class="sakktabla">
<tr>
<th class="barna1"></th>
<th class="barna2">H</th>
<th class="barna2">G</th>
<th class="barna2">F</th>
<th class="barna2">E</th>
<th class="barna2">D</th>
<th class="barna2">C</th>
<th class="barna2">B</th>
<th class="barna2">A</th>
<th class="barna3"></th>
</tr>
<tr>
<th class="barna4">8</th>
<th class="sotet">♜</th>
<th class="vilagos">♞</th>
<th class="sotet">♝</th>
<th class="vilagos">♛</th>
<th class="sotet">♚</th>
<th class="vilagos">♝</th>
<th class="sotet">♞</th>
<th class="vilagos">♜</th>
<th class="barna4">1</th>
</tr>
<tr>
<th class="barna4">7</th>
<th class="vilagos">♟</th>
<th class="sotet">♟</th>
<th class="vilagos">♟</th>
<th class="sotet">♟</th>
<th class="vilagos">♟</th>
<th class="sotet">♟</th>
<th class="vilagos">♟</th>
<th class="sotet">♟</th>
<th class="barna4">2</th>
</tr>
<tr>
<th class="barna4">6</th>
<th class="sotet"></th>
<th class="vilagos"></th>
<th class="sotet"></th>
<th class="vilagos"></th>
<th class="sotet"></th>
<th class="vilagos"></th>
<th class="sotet"></th>
<th class="vilagos"></th>
<th class="barna4">3</th>
</tr>
<tr>
<th class="barna4">5</th>
<th class="vilagos"></th>
<th class="sotet"></th>
<th class="vilagos"></th>
<th class="sotet"></th>
<th class="vilagos"></th>
<th class="sotet"></th>
<th class="vilagos"></th>
<th class="sotet"></th>
<th class="barna4">4</th>
</tr>
<tr>
<th class="barna4">4</th>
<th class="sotet"></th>
<th class="vilagos"></th>
<th class="sotet"></th>
<th class="vilagos"></th>
<th class="sotet"></th>
<th class="vilagos"></th>
<th class="sotet"></th>
<th class="vilagos"></th>
<th class="barna4">5</th>
</tr>
<tr>
<th class="barna4">3</th>
<th class="vilagos"></th>
<th class="sotet"></th>
<th class="vilagos"></th>
<th class="sotet"></th>
<th class="vilagos"></th>
<th class="sotet"></th>
<th class="vilagos"></th>
<th class="sotet"></th>
<th class="barna4">6</th>
</tr>
<tr>
<th class="barna4">2</th>
<th class="sotet">♙</th>
<th class="vilagos">♙</th>
<th class="sotet">♙</th>
<th class="vilagos">♙</th>
<th class="sotet">♙</th>
<th class="vilagos">♙</th>
<th class="sotet">♙</th>
<th class="vilagos">♙</th>
<th class="barna4">7</th>
</tr>
<tr>
<th class="barna4">1</th>
<th class="vilagos">♖</th>
<th class="sotet">♘</th>
<th class="vilagos">♗</th>
<th class="sotet">♕</th>
<th class="vilagos">♔</th>
<th class="sotet">♗</th>
<th class="vilagos">♘</th>
<th class="sotet">♖</th>
<th class="barna4">8</th>
</tr>
<tr>
<th class="barna5"></th>
<th class="barna2">A</th>
<th class="barna2">B</th>
<th class="barna2">C</th>
<th class="barna2">D</th>
<th class="barna2"h>E</th>
<th class="barna2">F</th>
<th class="barna2">G</th>
<th class="barna2">H</th>
<th class="barna6"></th>
</tr>
</body>
</html>
I would like to rotate the top line LETTERS (just ignore the bottom ones atm) but when I do, the border gets messed up. The letter can be found in class .barna2 Also wanna make sure that the browser support is on point so I rarely wanna use thing which are not supported.
Ignore my mistakes pls, its my first year at uni.
