happy cat image

Start Web Coding

Your First step toward web coding,
Start Web Coding

UI 변경

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 Naver 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. For example, let's look at the next page.
Open Internet Explorer and click it,you go to the following site. From the menu, choose View - Styles - No Styles. You can see only the html we are creating now that CSS is disabled. That's it. You can do this with html. CSS allows you to specify layout, font size, background image, background color, outline thickness style, and outline color. ^^;

The image below is part of the following style. Almost all pages, such as Naver, are the same.


다음 스타일 없음

If there is not much difference from the styled page even though you have clicked no style, it is just an old style Site. I just wondered if somebody would think why I do lessons roughly ^^ like this.

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





A


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



property value Described
align left, center, right Specify where to place the table
bgcolor Color value Color the background of the tabl
background Background picture Specify a background image for the table
border thickness Specifies the thickness of the table border
bordercolor Color value Specify the color of the table border
cellspacing interval Specifying the Space Between a Cell and a Cell
cellpadding hite space Specify the margin with the contents in the cell
height Size, ratio Absolute value when input with pixels, relative value relative to browser size when input in%
width Size, ratio Absolute value when specified in pixels, relative value to browser size when entered in%

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

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

The result

A

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

A B

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

A B
C D

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

A B
C D

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

A B
C D

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

left B
C D

The result

center B
C D

The result

right B
C D





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

A B
C D

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

1 2 3 4 5 6 7
1 2 3 4 5 6 7

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

A
C D

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

A b
C D

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

A B
C

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

A B
C D

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

Sun Mon Tue Wed Thu Fri Sat
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

강좌로 돌아가기