Day 3-2: Working w/Tables / Forms / Borders
HTML Table Tags
TagDescription
<table>Defines a table
<th>Defines a header cell in a table
<tr>Defines a row in a table
<td>Defines a cell in a table
________________________________________________________________________________________________________________
Styling HTML with CSSCSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
IntroductionYou may want to consider using HTML tables in your website. In addition to creating HTML tables to present data in rows and columns, you can also create HTML tables to organize information on your web page.
The process of creating an HTML table is similar to the process that you used to create your web page and any elements that you may have already included in your page, such as links or frames. Coding HTML tables into your web page is fairly easy since you need only understand a few basic table codes.
Creating a basic table. The basic structure of an HTML table consists of the following tags:
Constructing an HTML table consists of describing the table between the beginning table tag, <TABLE>, and the ending table table tag, </TABLE>. Between these tags, you then construct each row and each cell in the row. To do this, you would first start the row with the beginning row tag, <TR>, and then build the row by creating each cell with the beginning cell tag, <TD>, adding the data for that cell, and then closing the cell with the ending cell tag, </TD>. When you finish all of the cells for a row, you would then close the row with the ending row tag, </TR>.Then, for each new row, you would repeat the process of beginning the row, building each cell in the row, and closing the row.
The following table is an example of a basic table with three rows and two columns of data.
Data 1 Data 2
Data 3 Data 4
Data 5 Data 6
DAY 3-1 - EXAMPLES
Examples – Tables
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
- Create a Table
- Modify a Table Structure
- Format a Table Using CSS
HTML Table Tags
TagDescription
<table>Defines a table
<th>Defines a header cell in a table
<tr>Defines a row in a table
<td>Defines a cell in a table
________________________________________________________________________________________________________________
Styling HTML with CSSCSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
- Inline - by using the style attribute in HTML elements
- Internal - by using a <style> element in the <head> section
- External - by using an external CSS file
IntroductionYou may want to consider using HTML tables in your website. In addition to creating HTML tables to present data in rows and columns, you can also create HTML tables to organize information on your web page.
The process of creating an HTML table is similar to the process that you used to create your web page and any elements that you may have already included in your page, such as links or frames. Coding HTML tables into your web page is fairly easy since you need only understand a few basic table codes.
Creating a basic table. The basic structure of an HTML table consists of the following tags:
- Table tags: <TABLE> </TABLE>
- Header tags:<TH> </TH>
- Row tags: <TR> </TR>
- Cell tags: <TD> </TD>
Constructing an HTML table consists of describing the table between the beginning table tag, <TABLE>, and the ending table table tag, </TABLE>. Between these tags, you then construct each row and each cell in the row. To do this, you would first start the row with the beginning row tag, <TR>, and then build the row by creating each cell with the beginning cell tag, <TD>, adding the data for that cell, and then closing the cell with the ending cell tag, </TD>. When you finish all of the cells for a row, you would then close the row with the ending row tag, </TR>.Then, for each new row, you would repeat the process of beginning the row, building each cell in the row, and closing the row.
The following table is an example of a basic table with three rows and two columns of data.
Data 1 Data 2
Data 3 Data 4
Data 5 Data 6
DAY 3-1 - EXAMPLES
Examples – Tables
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>