Tables

Create a Table

<table> </table>

 

Table Rows

The first step in entering data into the table is to add rows using the table row element: <tr>.

 

Table Data

you can add data using the table data element: <td>.

 

In the example above, two data points (73 and 81) were entered in the one row that exists. By adding two data points, we created two cells of data. If the table were displayed in the browser, it would show a table with one row and two columns.

 

 

Table Headings

Table data doesn’t make much sense without titles to describe what the data represents.

To add titles to rows and columns, you can use the table heading element: <th>.

 

Just like table data, a table heading must be placed within a table row.

 

the use of the scope attribute, which can take one of two values:

1. row - this value makes it clear that the heading is for a row.
2. col - this value makes it clear that the heading is for a column.

 

Table Borders

So far, the tables you’ve created have been a little difficult to read because they have no borders.

 

The code in the example above is following is  deprecated , so please don’t use it.

CSS에서 해주는게 좋다~~

 

Spanning Columns

What if the table contains data that spans multiple columns?

For example, a personal calendar could have events that span across multiple hours, or even multiple days.

 

Data can span columns using the colspan attribute.

The attributes accepts an integer (greater than or equal to 1) to denote the number of columns it spans across.

질문 2

Spanning Rows

Data can also span multiple rows using the rowspan attribute.

perhaps an event goes on for multiple hours on a certain day

 

 

Table Body

Over time, a table can grow to contain a lot of data and become very long. When this happens, the table can be sectioned off so that it is easier to manage.

 

Long tables can be sectioned off using the table body element: <tbody>.

The <tbody> element should contain all of the table’s data, excluding the table headings (more on this in a later exercise).

 

 

Table Head

When a table’s body is sectioned off, however, it also makes sense to section off the table’s column headings using the <thead> element

 

only the column headings go under the <thead> element.

 

질문 2

 

Table Footer

The bottom part of a long table can also be sectioned off using the <tfoot> element.

 

In the example above, the footer contains the totals of the data in the table.

Footers are often used to contain sums, differences, and other data results.

 

Styling with CSS