How to add spacing between UITableViewCell

iOS Development

UITableView

Swift Programming

Interface Design

Mobile App Development

How to add spacing between UITableViewCell

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Start Practicing Learn More

Introduction

Adding spacing between table view cells is a common iOS UI request, but there is no single built-in spacing property for plain tables. You usually simulate spacing with section structure, content insets, or container views. The best method depends on whether you need rounded cards, separators, and compatibility with dynamic cell heights.

Approach 1: Section-Based Spacing

A reliable pattern is one row per section and using section headers as vertical spacing. This gives precise control and works with reusable cells.

swift

1import UIKit
2
3final class SpacedTableController: UITableViewController {
4    private let items = ["Alpha", "Beta", "Gamma", "Delta"]
5
6    override func viewDidLoad() {
7        super.viewDidLoad()
8        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")
9        tableView.separatorStyle = .none
10        tableView.backgroundColor = UIColor.systemGroupedBackground
11    }
12
13    override func numberOfSections(in tableView: UITableView) -> Int {
14        items.count
15    }
16
17    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
18        1
19    }
20
21    override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
22        section == 0 ? 8 : 12
23    }
24
25    override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
26        let view = UIView()
27        view.backgroundColor = .clear
28        return view
29    }
30
31    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
32        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
33        cell.textLabel?.text = items[indexPath.section]
34        return cell
35    }
36}

This approach avoids manual frame math and works well with auto layout.

Approach 2: Card-Style Cell Containers

If design calls for card-like cells, place a rounded container view inside the cell and inset it from edges.

swift

1import UIKit
2
3final class CardCell: UITableViewCell {
4    private let cardView = UIView()
5    private let titleLabel = UILabel()
6
7    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
8        super.init(style: style, reuseIdentifier: reuseIdentifier)
9        setup()
10    }
11
12    required init?(coder: NSCoder) {
13        super.init(coder: coder)
14        setup()
15    }
16
17    private func setup() {
18        selectionStyle = .none
19        backgroundColor = .clear
20        contentView.backgroundColor = .clear
21
22        cardView.translatesAutoresizingMaskIntoConstraints = false
23        cardView.backgroundColor = .secondarySystemBackground
24        cardView.layer.cornerRadius = 12
25
26        titleLabel.translatesAutoresizingMaskIntoConstraints = false
27
28        contentView.addSubview(cardView)
29        cardView.addSubview(titleLabel)
30
31        NSLayoutConstraint.activate([
32            cardView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 6),
33            cardView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -6),
34            cardView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
35            cardView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
36
37            titleLabel.topAnchor.constraint(equalTo: cardView.topAnchor, constant: 12),
38            titleLabel.bottomAnchor.constraint(equalTo: cardView.bottomAnchor, constant: -12),
39            titleLabel.leadingAnchor.constraint(equalTo: cardView.leadingAnchor, constant: 12),
40            titleLabel.trailingAnchor.constraint(equalTo: cardView.trailingAnchor, constant: -12)
41        ])
42    }
43
44    func configure(text: String) {
45        titleLabel.text = text
46    }
47}

Container-based spacing gives visual polish and works nicely with shadows and grouped backgrounds.

Decide Which Method to Use

Use section spacing when your table already maps cleanly to one item per section and you want simple implementation.

Use card containers when designers want rounded corners, custom backgrounds, and richer visual hierarchy.

In both approaches, keep cell reuse predictable by setting all view state during configuration.

Fine-Tune Spacing for Dynamic Type

If your app supports larger text sizes, verify spacing with dynamic type enabled. Content expansion can make fixed gaps appear too tight or too large depending on row height. Prefer constraint-based internal padding and test with several accessibility sizes in Simulator. When card-style cells are used, tune top and bottom insets so multiline titles still feel balanced. Also verify edit mode, swipe actions, and reorder controls because these states can alter content width and expose clipping issues when spacing is implemented with aggressive masks or hardcoded frames.

Common Pitfalls

A frequent mistake is trying to set margins directly on UITableViewCell frame in layoutSubviews. Manual frame edits can conflict with auto layout and self-sizing behavior.

Another issue is forgetting to disable default separators when custom spacing is added. Mixed separator styles often look broken.

Developers also forget to reset shadows, corner masks, or hidden flags on reused cells, which causes random visual artifacts while scrolling.

Finally, avoid hard-coded heights if content can grow. Let auto layout drive row height and apply spacing through container constraints or section headers.

Summary

Table views do not have a single built-in inter-cell spacing property.
Section headers provide clean vertical gaps with minimal complexity.
Card-style container views are ideal for modern rounded list designs.
Keep reuse state and separators consistent to avoid visual glitches.
Prefer auto layout-friendly spacing techniques over manual frame edits.