Table Tag

Are you following all the lessons? I understand it would be hard for you. As a new beginner, I guess you don’t know what the hell I am telling. I would not say that I am an expert, but for the first time when I started to learn this, I betted that I would never master web coding, even If I do my best. It might be because I didn’t have any idea nor basic knowledge. However, now I am able to publish Main page of google by hard coding in one or two days, since I practiced many pages that I can see on internet, every day and continually. But I am not good at cross browsing yet. (Have to master it soon, though)
Obviously, there is a difference between slow and fast. But that's because each person's difference is inevitable, and the most important thing is not to give up until you master it. If you try so hard, you can see yourself changing.
When I started studying Japanese at the beginning, I was given way too much assignments so that my hair was beginning to turn to grey (I was only 19 years old then!), and when I quit going that language school, my gray hair disappeared together.
However, I think that I was able to speak Japanese best at those time. I am still study Japanese, but it is almost impossible to study as hard as when I went to the school. But, one thing is clear. The too much assignments were burden on me, and I had so much hard time memorizing Hiragana. But if I had given up due to the difficulties I had, would not have been able to go to Japan, travel alone, work part-time and make friends. It definitely takes long time, and you should put so much more effort on it than others. But If you don’t give up, you will be an expert!

Let’s cut the crap, and move on to table tag.
It's a tag on the web. Previously, you used to use this table tags to configure layouts. Now, you can configure the layout with DIV or the newly created tag in HTML5 the tag. Table tags are usually used for calendars or bulletin boards.
So far, the tags on the course have demonstrated their function and I have not explained how to decorate. For example, I didn’t explain how to change the color of text created by the h tag, how to write it larger or how to align it to the right. Also, I didn’t explain how you could add some functions on the image tags. That is because we are going to learn those thing while covering CSS.
Nowadays, HTML is usually used to structure the pages. And the design is made with CSS style sheet.

Now let's try table tag!

<table>                <-- start of table tag
    <tr>               <-- start of line (column)
        <td>A          <-- start of the line (line)
        </td>		   <-- End of line (line)
    </tr> 			   <-- end of line (column)
</table>               <-- end of table tag

Since we opened tr from the top and used only one td, we have only one table. The table below is the result of implementing the above source.

The result

You just see A because it has no effect on the table. Let's look at the various effects of the table.

Let's specify a table earlier in the border 1.

<table border="1">
    <tr>
        <td>A</td>
    </tr>
</table>

The result

To add another column on one line, you could do as below tags.

<table border="1">
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
</table>

The result

Then I'll add a line this time.

<table border="1">
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
</table>

The result

Let's specify bordercolor.

<table border="1" bordercolor="skyblue">
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
</table>

The result

Let's set the background color with bgcolor.

<table border="1" bgcolor="pink">
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
</table>

The result

An example of alignment to the left.

<table border="1" align="left">
    <tr>
        <td>left</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
</table>

It’s an example of alignment in the middle.

<table border="1" align="center">
    <tr>
        <td>center</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
</table>

Lastly, let’s see an example of alignment to the right.

<table border="1" align="right">
    <tr>
        <td>right</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
</table>

The result

The result

The result

Let's adjust cell spacing.

<table border="1" cellspacing="10">
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
</table>

The result

Let's specify the size of the table.

<table width="90%" height="300" border="1">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
    </tr>
</table>

The result

It’s time to learn how to merge the cells. ^^
Horizontal cell merge is colspan = "number of cells to combine"
Vertical cell merging is rowspan = "number of cells to combine".

The result

Let's make the above table?

<table border="1">
    <tr>
        <td align="center" colspan="2">A</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
</table>

As in the above source, I combined the two cells by giving 2 as colspan in the first line.
Instead of combining two cells, there is only one td tag on the first line. If you write the td tag on the first line, the output is like the table below.

The result

let's combine vertical cells. You'll use rowspan this time, right? ^^

<table border="1" >
    <tr>
        <td rowspan="2">A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
    </tr>
</table>

The result

This time, there is only one td in the second line. What if there are two td in the second line?

<table border="1" >
    <tr>
        <td rowspan="2">A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
</table>

The result

It looks like the above. ^^
Bgcolor is also available for tr and td tags. Then one color only applies to that color.
Finally, we will use the table to create a calendar and finish the course. I used style = "color: red". This is CSS. You can just skip it since we will cover it later on when learning CSS.
The source is shown like below.

    <table bgcolor="skyblue" width="500">
    <tr align="center">
        <td style="color:red">Sun</td>
        <td>월</td>
        <td>화</td>
        <td>수</td>
        <td>목</td>
        <td>금</td>
        <td style="color:red">Sat</td>
    </tr>
    <tr align="center">
        <td bgcolor="pink" colspan="3"></td>

        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td style="color:red">4</td>
    </tr>
    <tr align="center">
        <td style="color:red">5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td style="color:red">11</td>
    </tr>
    <tr align="center">
        <td style="color:red">12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td style="color:red">18</td>
    </tr>
    <tr align="center">
        <td style="color:red">19</td>
        <td>20</td>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td style="color:red">25</td>
    </tr>
    <tr align="center">
        <td style="color:red">26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
        <td>31</td>
        <td bgcolor="pink"></td>
    </tr>
</table>

The Result