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 attribute accepts an integer (greater than or equal to 1) to denote the number of columns it spans across.

<table>

<tr>

<th>Monday</th>

<th>Tuesday</th>

<th>Wednesday</th>

</tr>

<tr>

</tr>

</table>

In the example above, the data Out of Town spans the Monday and Tuesday table headings using the value 2 (two columns). The data Back in Town appear only under the Wednesday heading.

Instructions

1. In index.html, span a <td> element across two columns.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Ship To It - Company Packing List</title>

<link

href="https://fonts.googleapis.com/css?family=Lato: 100,300,400,700|Luckiest+Guy|Oxygen:300,400"

rel="stylesheet"

/>

</head>

<body>

<li>

<img

src="https://content.codecademy.com/courses/web-101/unit-9/htmlcss1-img_logo-shiptoit.png"

height="20px;"

/>

</li>

<li class="active">Action List</li>

<li>Profiles</li>

<li>Settings</li>

</ul>

<div class="search">Search the table</div>

<table>

<tr>

<th scope="col">Company Name</th>

<th scope="col">Number of Items to Ship</th>

<th scope="col">Next Action</th>

</tr>

<tr>

<td>Adam's Greenworks</td>

<td>Package Items</td>

</tr>

<tr>

<td>Davie's Burgers</td>

<td>Send Invoice</td>

</tr>

<tr>

<td>Baker's Bike Shop</td>

<td>Send Invoice</td>

</tr>

<tr>

<td>Miss Sally's Southern</td>

</tr>

<tr>

<td>Summit Resort Rentals</td>

</tr>

<tr>

<td>Strike Fitness</td>

<td>Enter Order</td>

</tr>

</table>

</body>

</html>

Style.css

body {

background: #EEE;

margin: 0;

padding: 0;

}

/* Navigation */

.navigation {

box-sizing: border-box;

background-color: #3587A4;

overflow: auto;

padding: 18px 50px;

position: relative;

top: 0;

width: 100%;

z-index: 999;

}

ul {

padding: 0;

margin: 0;

}

li {

color: #FFF;

display: inline-block;

font-family: 'Oxygen', sans-serif;

font-size: 16px;

font-weight: 300;

letter-spacing: 2px;

margin: 0;

padding: 20px 18px 10px 18px;

text-transform: uppercase;

}

.active {

color: #88CCF1;

}

/* Table */

table {

height: 40%;

left: 10%;

margin: 20px auto;

overflow-y: scroll;

position: static;

width: 80%;

}

thead th {

background: #88CCF1;

color: #FFF;

font-family: 'Lato', sans-serif;

font-size: 16px;

font-weight: 100;

letter-spacing: 2px;

text-transform: uppercase;

}

tr {

background: #f4f7f8;

border-bottom: 1px solid #FFF;

margin-bottom: 5px;

}

th, td {

font-family: 'Lato', sans-serif;

font-weight: 400;

padding: 20px;

text-align: left;

width: 33.3333%;

}

.search {

background-color: #FFF;

border: 1px solid #DDD;

border-radius: 3px;

color: #AAA;

padding: 20px;

margin: 50px auto 0px auto;

width: 77%;

}