Free practice samples to learn HTML codes Create Web Pages
This is my 4rth blog post on HTML. In this part you will learn how to create table in HTML documents. Below you will also find some free practice questions.
What is HTML TABLES?
Tables are defined with the <table> tag.
A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
Table Example
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How the HTML code above looks in a browser:
row 1, cell 1
|
row 1, cell 2
|
row 2, cell 1
|
row 2, cell 2
|
HTML Tables and the Border Attribute
If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show.
To display a table with borders, specify the border attribute
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML Table Headers
Header information in a table are defined with the <th> tag.
All major browsers display the text in the <th> element as bold and centered.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How the HTML code above looks in your browser:
Header 1
|
Header 2
|
row 1, cell 1
|
row 1, cell 2
|
row 2, cell 1
|
row 2, cell 2
|
HTML Table Tags
Tag
|
Description
|
<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
|
<caption>
|
Defines a table caption
|
<colgroup>
|
Specifies a group of one or more columns in a table for formatting
|
<col>
|
Specifies column properties for each column within a <colgroup> element
|
<thead>
|
Groups the header content in a table
|
<tbody>
|
Groups the body content in a table
|
<tfoot>
|
Groups the footer content in a table
|
Code for Table without border
<h4>This table has no borders:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>And this table has no borders:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Results
This table has no borders:
100
|
200
|
300
|
400
|
500
|
600
|
And this table has no borders:
100
|
200
|
300
|
400
|
500
|
600
|
HTML tables - sample quiz
Choose the best answer.
1. Required tag that is used to create a table row?
a. <table>
b. <th>
c. <tr>
d. <td>
2. Which of the following table tags is used to create a table cell?
a. <td>
b. <caption>
c. <table>
d. <tr>
3. The content of the table can be placed only within the _____ tag(s)?
a. <td> or <tr>
b. <tr> or <table>
c. <td> or <th>
d. <td> or <caption>
4. Which of the following CSS definitions removes the space between table cells?
a. border:none
b. cellpadding:none
c. cellspacing:none
d. border-collapse:collapse
5. Which of the following will set 6px padding around content in the table cell?
a. td {cellpadding="6px"}
b. td {padding:6px}
c. td {cellspacing:6px}
d. td {margin:6px}
6.Which CSS attribute and value is used to center table data horizontally
a. align:center
b. text-align:center
c. align="center"
d. text-align:middle
7. Which of the following would you use to merge two table cells in the same row?
a. <td colspan="2">
b. <td merge="2">
c. <td span="two">
d. <td rowspan="2">
8. An optional tag that disignates content for the top row or left column. By default, the text will appear bold and centered
a. <tr>
b. <caption>
c. <header>
d. <th>
9. Which of the optional table tag used to add a short description above a table
a. description
b. keyword
c. caption
d. title
10. Attribute that identifies the number of table rows a single cell can occupy?
a. rowspan
b. colspan
c. cellmerge
d. none of the above
Free questions and Answers
1 c
2 a
3 c
4 d
5 b
6 b
7 a
8 d
9 c
10 a
