Customizing table style

CSS

In order to use CSS to style a table, you’ll probably want to add a class or id attribute to the <table> element. django-tables2 has a hook that allows arbitrary attributes to be added to the <table> tag.

>>> import django_tables2 as tables
>>>
>>> class SimpleTable(tables.Table):
...     id = tables.Column()
...     age = tables.Column()
...
...     class Meta:
...         attrs = {"class": "mytable"}
...
>>> table = SimpleTable()
>>> # renders to something like this:
'<table class="mytable">...'

By default, django-tables2 looks for the DJANGO_TABLES2_TABLE_ATTRS setting which allows you to define attributes globally for all tables. For example, to have a Bootstrap5 table with hoverable rows and a light table header define it as follows:

DJANGO_TABLES2_TABLE_ATTRS = {
    'class': 'table table-hover',
    'thead': {
        'class': 'table-light',
    },
}

You can also specify attrs attribute when creating a column. attrs is a dictionary which contains attributes which by default get rendered on various tags involved with rendering a column. You can read more about them in Column and row attributes. django-tables2 supports three different dictionaries, this way you can give different attributes to column tags in table header (th), rows (td) or footer (tf).

>>> import django_tables2 as tables
>>>
>>> class SimpleTable(tables.Table):
...     id = tables.Column(attrs={"td": {"class": "my-class"}})
...     age = tables.Column(attrs={"tf": {"bgcolor": "red"}})
...
>>> table = SimpleTable()
>>> # renders to something like this:
'<tbody><tr><td class="my-class">...</td></tr>'
>>> # and the footer will look like this:
'<tfoot><tr> ... <td class="age" bgcolor="red"></tr></tfoot>''

Available templates

We ship a couple of different templates:

Template name

Description

django_tables2/table.html

Basic table template (default).

django_tables2/bootstrap.html

Template using bootstrap 3 structure/classes

django_tables2/bootstrap-responsive.html

Same as bootstrap, but wrapped in .table-responsive

django_tables2/bootstrap4.html

Template using bootstrap 4 structure/classes

django_tables2/bootstrap4-responsive.html

Same as bootstrap4, but wrapped in .table-responsive

django_tables2/bootstrap5.html

Template using bootstrap 5 structure/classes

django_tables2/bootstrap5-responsive.html

Same as bootstrap5, but wrapped in .table-responsive

django_tables2/semantic.html

Template using semantic UI

By default, django-tables2 looks for the DJANGO_TABLES2_TEMPLATE setting which is django_tables2/table.html by default.

If you use bootstrap 5 for your site, it makes sense to set the default to the bootstrap 5 template:

DJANGO_TABLES2_TEMPLATE = "django_tables2/bootstrap5.html"

If you want to specify a custom template for selected tables in your project, you can set a template_name attribute to your custom Table.Meta class:

class PersonTable(tables.Table):

    class Meta:
        model = Person
        template_name = "django_tables2/semantic.html"

You can also use the template_name argument to the Table constructor to override the template for a certain instance:

table = PersonTable(data, template_name="django_tables2/bootstrap-responsive.html")

For none of the templates any CSS file is added to the HTML. You are responsible for including the relevant style sheets for a template.

Custom Template

And of course if you want full control over the way the table is rendered, ignore the built-in generation tools, and instead pass an instance of your Table subclass into your own template, and render it yourself.

You should use one of the provided templates as a basis.