Customizing Headers and Footers of a TableView

In this tutorial we are going to fill the table with some sample country names and use custom UIViews to create a header and a footer of our table view.

Update: Dec 10, 2014. The rewritten version in Swift for iOS 8 and Xcode 6 is available here.

This tutorial is made with Xcode 4 and targeted for iOS6. To view the updated tutorial for Xcode 5 and targeted for iOS7 click here.

Open Xcode and create a new Single View Application. For product name, use HeaderFooterDemo and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPhone is selected in Devices, and that the Use Storyboards checkbox is deselected and Use Automatic Reference Counting checkbox is selected.

First, we setup the basic table. Go to the view controller’s NIB file, and drag a Table view from the Objects browser into the NIB’s view.

Connect the new table view to the controller by Ctrl-clicking it and dragging the connection line out to the File’s Owner icon in the Placeholders list. Click the dataSource item in the pop-up, and repeat the process again to connect the delegate.

In ViewController.m, add the two protocol names to the interface line

@interface ViewController () <UITableViewDelegate, UITableViewDataSource>

In the @interface section , create a property to hold the countries and a property for the tableView.

@property (nonatomic, strong) NSMutableArray *countries;
@property (nonatomic, strong) UITableView *tableView;

In ViewDidLoad , fill the array with some sample country names. Change viewDidLoad in

- (void)viewDidLoad 
[super viewDidLoad];

self.countries = [[NSMutableArray alloc] init];

NSArray *countriesInEurope = @[@"France",@"Spain",@"Germany",@"Great Britain", @"Italy", @"Portugal"]; NSDictionary *europeCountriesDict = @{@"countries" : countriesInEurope};
NSArray *countriesinAsia = @[@"Japan", @"China",@"India",@"Indonesia"]; NSDictionary *asiaCountriesDict = @{@"countries" : countriesinAsia};
NSArray *countriesinSouthAmerica = @[@"Argentinia", @"Brasil",@"Chile"]; NSDictionary *southAmericaCountriesDict = @{@"countries" : countriesinSouthAmerica};

[self.countries addObject:europeCountriesDict];
[self.countries addObject:asiaCountriesDict];
[self.countries addObject:southAmericaCountriesDict];

For each continent we create a dictionary containing an array of countries. These dictonaries are added to our countries property. Implement the delegate and datasource required methods.

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section 
NSDictionary *dictionary = self.countries[section];
NSArray *array = dictionary[@"countries"];
return [array count];

For every dictonary the number of items are equal to the number of rows in a section.

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { 
return [self.countries count];

For every dictionary in our countries property there will be a section.

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 
static NSString *cellIdentifier = @"cellIdentifier";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];

if (!cell)
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];

NSDictionary *dictionary = self.countries[indexPath.section];
NSArray *array = dictionary[@"countries"];
NSString *cellvalue = array[indexPath.row];

cell.textLabel.text = cellvalue;

return cell;

The textLabel of the cell will be updated with the corresponding index of the country inside the doctionary. Now it's finally time to customize our section header and footer. Implement the tableView:viewForHeaderInSection.

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
UIView *sectionHeaderView = [[UIView alloc] initWithFrame:
CGRectMake(0, 0, tableView.frame.size.width, 50.0)];
sectionHeaderView.backgroundColor = [UIColor cyanColor];

UILabel *headerLabel = [[UILabel alloc] initWithFrame:
CGRectMake(15, 15, sectionHeaderView.frame.size.width, 25.0)];

headerLabel.backgroundColor = [UIColor clearColor];
headerLabel.textAlignment = NSTextAlignmentCenter;
[headerLabel setFont:[UIFont fontWithName:@"Verdana" size:20.0]];
[sectionHeaderView addSubview:headerLabel];

switch (section) {
case 0:
headerLabel.text = @"Europe";
return sectionHeaderView;
case 1:
headerLabel.text = @"Asia";
return sectionHeaderView;
case 2:
headerLabel.text = @"South America";
return sectionHeaderView;

return sectionHeaderView;

In this method we will create a UIView with a height of 5o, which contains a UILabel. We align the text to the center and change the font. According tithe section, we assign the name of the continent to the Label.

For the footer view we'll need a gradient png file. You can download the file here and add it to the project. Add the following method to create the section footer view.

- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
UIImage *myImage = [UIImage imageNamed:@"gradient.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:myImage];
imageView.frame = CGRectMake(10,10,1,30);

return imageView;

We create a image view containing our gradient image. The height of this image is 30 point. The only thing left to do is to adjust the height of our header and footer section. We can accomplish this using the following methods.

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section 
return 30.0f;

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
return 50.0f;


Build and Run, you should see our custom section header and footer in the tableview.

You can download the source code of the HeaderFooterDemo at the ioscreator repository on github.