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">...'
Also every column gets a class attribute, which by default is the same as the
column’s label. Also, by default, odd rows’ class is odd and even rows’
class is even. So rows of the SimpleTable() from previous example
in django-tables2 default configuration will look like:
<tr class="odd">
<td class="id">...</td>
<td class="age">...</td>
</tr>
<tr class="even">
<td class="id">...</td>
<td class="age">...</td>
</tr>
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 3 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/bootstrap4.html | Template using bootstrap 4 structure/classes |
| django_tables2/bootstrap-responsive.html | Same as boostrap, 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 3 for your site, it makes sense to set the default to the bootstrap 3 template:
DJANGO_TABLES2_TEMPLATE = 'django_tables2/bootstrap.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.