Today I am going to apply CSS box into a Tic Tac Toe table. And this is the assignment from the course.
Step One: Create A HTML Table
The Tic Tac Toe is a table contains three rows and three columns.
So the table page looks like:
You can’t see the table because two reasons:
1. I didn’t put any table data in the elements, so it is an empty table.
2. I didn’t add border in the CSS.
Step Two: Set Basic Text and Table Properties
I start to move the header from the page left to the center, so I set the “text-align” property to be center.
Then I set the table margin as auto and set each td width and height to be 100px.
As the result, the table get bigger, but it is still invisible without adding borders.
Step Three: Use Class Selector to Add Vertical Border
When I was doing this assignment, I did very well on the first two steps, but I got stuck on this step.
How to add the right border on each table data box? I tried to add border on table, but it didn’t seem right. I even tried to use the nth-of-type selector to select each single box, but it was still wrong. I was so struggled, so I had to watch the solution video.
The course instructor told us to add “class” in the HTML and set all the vertical and horizontal value. The second cell of each row will have a left and right vertical border, and the second row will have a horizontal top and bottom border.
In the CSS, I set the class selector “.vert” border-left and border-right to be a black solid border.
The result shows the left and right border on the second table column.
Step Four: Use Class Selector to Add Horizontal Border
The final step is to add the horizontal border for the second row of the table. We only set the top and bottom border.
The final result:
After this exercise, I realized that the hardest part is not about writing those code, but is about connecting all the code in a logical way.