Geeks Ocean

Create Outline Of Tic Tac Toe Board Using HTML And CSS

Dikshant Gautam
Dikshant Gautam
Apr 03, 2020
Create Outline Of Tic Tac Toe Board Using HTML And CSS

Hello fellas, in this article, i would tell you how you can create outline of tic tac toe board using HTML And CSS. It is non-working as no JavaScript or logic is involved, it's just an outline made using HTML And CSS. You could use a simple text editor and write the below code yourself, or you could copy paste the below code in a text editor and then save it as HTML file.


HTML And CSS Code To Create Tic Tac Toe Board - 


<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe Board</title>
<style type="text/css">
h1	{
text-align: center;
margin-bottom: 100px;
}
table	{

margin: auto;
}
td	{
width: 100px;
height: 100px;
}
.vertical	{
border-left: 1px solid black;
border-right: 1px solid black;
}

.horizontal	{
border-top: 1px solid black;
border-bottom: 1px solid black;
}


</style>
</head>
<body>
<h1>Tic Tac Toe</h1>
<table>
<tr>
<td></td>
<td class="vertical"></td>
<td></td>
</tr>
<tr>
<td class="horizontal"></td>
<td class="vertical horizontal"></td>
<td class="horizontal"></td>
</tr>
<tr>
<td></td>
<td class="vertical"></td>
<td></td>
</tr>
</table>

</body>
</html>