Create Static Table View Using Storyboard
After we published the iCloud programming tutorial, the first question from our readers is not about iCloud but related to the static table view. If you’ve followed our tutorials, you should have a basic understanding about table view. However, the table views that we’ve covered are of dynamic content. The “Add Note” controller that we built in the previous tutorial, on the other hand, makes use of the static table view. If you have problem with static table view, this tutorial is for you. We’ll show you how to create static table view using Storyboard.
To illustrate how easy you can use Storyboard to implement static table view, we’ll build a simple Setting screen. Static table views are ideal in situations where a pre-defined number of data items to be displayed. A setting screen is an obvious use of static table view.

Creating Xcode Project
To get started, launch Xcode and create a new project using the Single View Application template.

Create new Xcode project
Name your project as “StaticTableDemo” and don’t forget to select “Storyboard” in your project setting.

Xcode Project Settings
Designing Static Table View
In Storyboard, first delete the default view controller and drag a Table View Controller from the Object library.

Drag a Table View Controller to Storyboard
By default, Xcode sets the table view for dynamic content. You can easily change the table view from dynamic to static cells by altering the content property. Once changed, you’ll have a table view with three empty static cells.

Set the Content Property to Static Cells
To get the desired view of the Settings screen, change the table style from “Plain” to “Grouped” in the Attributes inspector of the table view. You have two ways to change the number of table row from 3 to 2. The easiest way is to select one of the table rows and press delete button to remove it. Alternatively, select the Table View Section in the document navigator and change the row number.

Customizing the Table View Section
You can use header and footer to display addition information for the table section. Set the header and footer as shown in the above screen.
Next we’ll design the table view cell with the following steps:
- Drag a label object into the table view cell and adjust its size to 17. Set the label to “Mobile Notification”.
- Drag another label object into the table view cell and place it under the previous label. Adjust its size to 10 and set the label to “Do you want to receive push notification?”.
- Drag a Switch object into the table view cell.
- Repeat the above procedures to implement the “Email Notification” cell.

Designing table view cells
We’ve created the first table section. To add the second section, select the Table View and change the “Sections” value in Attributes inspector to 2. As soon as you update the section number, Xcode adds a new section and the same content of the first section is automatically copied.

Changing the section number in Attributes inspector
Simply change the section and the table cells to make them look like the following:

Synchronization Section
To complete the layout of the Settings screen, embed the table view controller in a navigation controller. Select the table view controller and select Editor -> Embed in -> Navigation Controller from the Xcode menu.

Embed table view controller into navigation controller
Compile and Run the App
That’s it! Finally compile and run the app in Simulator. You should have a Settings screen look like this:

StaticTableDemo App
Summary
In this short tutorial, we demonstrate how you can create a static table view using Storyboard. While you can use dynamic table to display data from data source, static table view provides a great way to display a finite quantity of data that are already known beforehand. Settings screen is a common example that you can make use of the static table view.
For your complete reference, you can download the Xcode project here.
As always, leave us comment if you have any questions about the tutorial.
Comments
Gergő Németh
Authorgreat tutorial, thanks! (:
Henrik
AuthorThank you for great tutorials 🙂
I have a question for this one. How do you design a Table View with 5 or 6 groups, I can’t find a way to scale or move the Table View so I can work with the groups in the bottom.
Dmitriy Sherbina
AuthorYou can create as big Table View as You wish, just use scroll wheel then – to can scroll down a table view in StoryboardEditor and customize cells and groups. Hope this will help.
justMe
AuthorIn IOS 6 you can just place the mouse on the UITableViewController and scroll down like you do in any other application, also you can go to every section from the document outline
VladislavKovalyov
AuthorGreat tutorial, like always!
You have write tutorial about iCloud, so maybe you tell us about EventKit and examples with Custom Calendars? It will be great.
shail
AuthorGreate tutorial.how to change the background color?
Simon Ng
AuthorAssume that you have associated the Table View Controller with a ViewController class (a subclass of UITableViewController). You can add the following code in viewDidLoad method to change the background color:
self.tableView.backgroundColor = [UIColor blueColor];
self.tableView.backgroundView = nil;
_Mac
AuthorFYI: Might be worth mentioning that you need to “clear out” the TableView class first, that you’re creating to use for this. Otherwise it will complain and warn you about sections and rows etc.
It had me going for a while, just thought I should share this help out others here…
Niranjan
AuthorHow did you add actions to switches..??? help me adding .h and .m file to this view controller….
_Mac
AuthorThank’s 4 the Tut, Simon.
Never even thought about doing the prefs-pane this pane. Been messing w scrollviews etc. Thank’s for simplifying my coding day 🙂
Gerhard
Authorhow can i localize here the header and footer?
hitesh
Authorgreat tutorial… 😉
Simon Ng
AuthorThanks!
harendra
Authorhow can i add .h and .m file with tableview controller , identity inspector allows only uitable view controller class . thanks
badrinath V.M.
AuthorGreat tutorial , how can we set action on each of the cell in table view ?
Stephen
AuthorHi Thanks for good tutorial:) I have a question how to had the section footer appear in the center? I try to do it but cannot.
Niranjan
AuthorThanks for the great tutorial…and I’ve a small doubt how to add actions to the switches and connect the cells to detail view controllers. I tried adding a subclass of UITableViewController but then it doesn’t display the cells or sections… Please help me fix it…;)
Someone
AuthorUse control-drag to wire up.
Andre Dias
AuthorHow access the controls inner cells? I use table cell reference or table view? Thanks
Waldo
AuthorSo following this in Xcode 5, gives you a blank screen, I know I’m missing something here.
Waldo
Authorgot it
Phúc Duy Trần
AuthorHướng dẫn rất chi tiết! Thanks
Mike Critchley
AuthorGreat tutorial. I always forget the steps to go through for static cells. Thanks a million! For those below having problems then subclassing the view in Storyboard, after creating a UITableViewController and connecting it to the view, go in and either delete or comment out the template code, which is actually for dynamic cells. In particular, blocking out the following methods will prevent the blank-screen thing, and will also allow you to hook up outlets as usual to your .h file.
/*
– (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
– (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
*/
Chanchal
AuthorThanks for tutorial.. I am trying to use vertical scroll view with paging , in which i need to swipe images.. please upload one tutorial on that… Thanks in advance
Johnny
AuthorGreat tutorial! Very helpful! thank you! 🙂