5 of 7
This lesson is closed. Finish the one before it. Do the practice. Pass the assessment. Then this one opens.
Back to the lesson. Three tries are used. Read this again, then try the code.
You finished. The lesson is open again.
Display the company’s branch managers, their location, and phone number.
The clay outline is the part this lesson is about.
A table is rows. Each row is tr. The first row is the headings: th for table heading. The next rows are the people: td for table data, an ordinary cell. Three columns, because the paper has three: Branch Manager, Location, Phone No.
The two people and their numbers are printed on the paper. Copy them. Mr. Remi Alalade, Gbagi Market, Ibadan, Oyo State, 08130304598. Dr. Jones Ogwuma, Okpara Avenue, Enugu, Enugu State, 09156098799. Do not invent a third person. Do not change a digit.
This is the part a friend got mostly right: a header row, then one row per person, three cells each. Keep that shape. Put the table on the About page under a heading, Branch managers. Wrap it in a div with class="table-wrap" so a phone can scroll the table sideways without scrolling the whole page.
<h2>Branch managers</h2>
<div class="table-wrap">
<table>
<tr>
<th>Branch Manager</th>
<th>Location</th>
<th>Phone No.</th>
</tr>
<tr>
<td>Mr. Remi Alalade</td>
<td>Gbagi Market, Ibadan, Oyo State</td>
<td>08130304598</td>
</tr>
<tr>
<td>Dr. Jones Ogwuma</td>
<td>Okpara Avenue, Enugu, Enugu State</td>
<td>09156098799</td>
</tr>
</table>
</div>.table-wrap {
overflow-x: auto;
margin: 12px 20px 20px;
}
table {
border-collapse: collapse;
width: 100%;
min-width: 520px;
}
th, td {
border: 1px solid #1a1712;
padding: 10px;
text-align: left;
}
th {
background: #1a1712;
color: #faf7f2;
}<table>The whole grid. It does not draw borders by itself. The CSS draws them.<tr>One row. The first row holds three th labels. Each person is another tr.<th>A heading cell. Branch Manager, Location, Phone No. Use the paper’s words.<td>An ordinary cell. Three per person, in the same order as the headings.border-collapse: collapse;Makes the lines meet as one grid, instead of a double line around every cell..table-wrapoverflow-x: auto lets a narrow phone scroll the table sideways. The rest of the page stays still.The next lesson opens after you practice and pass the assessment.
The first row is labels, but every cell is an ordinary td. Make the first row headings.
The code is right. Start the assessment when you are ready. The lesson stays closed until both answers are right.
The lesson is closed. Pick one answer each, then mark it. A wrong answer tells you why, what to do, and what to remember.