How to style a table view header / footer

The UITableView implements a header and a footer when you’re using the tableView:titleForHeaderInSection method (tableView:titleForFooterInSection respectively). However when the header (or the footer) is displayed you can’t change the font or colour of your text.

You can however implement the following methods in your table view delegate and create a custom UILabel object for the header like so:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {
    
    UILabel *headerLabel = [[UILabel alloc]init];
    headerLabel.text = @"My Custom Section Header";
    headerLabel.textColor = [UIColor whiteColor];
    headerLabel.shadowColor = [UIColor blackColor];
    headerLabel.font = [UIFont fontWithName:@"Chalkduster" size:24];
    headerLabel.backgroundColor = [UIColor clearColor];
    headerLabel.textAlignment = UITextAlignmentCenter;
    
    return headerLabel;
}

You can achieve the same for the footer by using the tableView:viewForFooterInSection method.

More info can be found in the UITableViewDelegate Protocol Reference.





Jay is the CEO and founder of WP Hosting, a boutique style managed WordPress hosting and support service. He has been working with Plesk since version 9 and is a qualified Parallels Automation Professional. In his spare time he likes to develop iOS apps and WordPress plugins, or draw on tablet devices. He blogs about his coding journey at http://wpguru.co.uk and http://pinkstone.co.uk.